個(gè)人或匯編

插件可以單獨(dú)包含（使用Bootstrap的單個(gè)*.js文件），或者一次全部使用bootstrap.js或縮小bootstrap.min.js（不包括兩者）。

相依性

一些插件和CSS組件依賴于其他插件。如果您單獨(dú)包含插件，請(qǐng)確保在文檔中檢查這些依賴關(guān)系。另外請(qǐng)注意，所有插件都依賴于jQuery（這意味著jQuery必須包含在插件文件之前）。

我們的下拉菜單，彈出窗口和工具提示也取決于Popper.js。

數(shù)據(jù)屬性

幾乎所有的引導(dǎo)插件都可以單獨(dú)通過HTML啟用和配置，數(shù)據(jù)屬性是我們使用JavaScript功能的首選方法。一定要僅在單個(gè)元素上使用一組數(shù)據(jù)屬性，您不能從同一個(gè)按鈕觸發(fā)工具提示和模式。

但是，在某些情況下，禁用此功能可能是可取的。若要禁用數(shù)據(jù)屬性api，請(qǐng)取消綁定命名空間為data-api就像這樣：

$(document).off('.data-api')

或者，要針對(duì)特定的插件，只需將插件的名稱與Data-API命名空間一起包括在如下所示的名稱空間中：

$(document).off('.alert.data-api')

事件

Bootstrap為大多數(shù)插件的獨(dú)特操作提供自定義事件。一般來說，這些都是不定式和過去分詞形式 - 不定式（ex。show）在事件開始時(shí)觸發(fā)，其過去分詞形式（ex。shown）在動(dòng)作完成時(shí)觸發(fā)。

所有不定式事件preventDefault()功能。這提供了在動(dòng)作開始之前停止執(zhí)行的能力。從事件處理程序返回false也將自動(dòng)調(diào)用preventDefault()...

$('#myModal').on('show.bs.modal', function (e) {  
  if (!data) return e.preventDefault() // stops modal from being shown
})

編程API

我們還認(rèn)為，您應(yīng)該能夠完全通過JavaScriptAPI使用所有的Bootstrap插件。所有公共API都是單一的、可鏈接的方法，并返回所操作的集合。

$('.btn.danger').button('toggle').addClass('fat')

所有的方法都應(yīng)該接受一個(gè)可選的選項(xiàng)對(duì)象，一個(gè)針對(duì)特定方法的字符串，或者什么都不接受（它用默認(rèn)行為啟動(dòng)一個(gè)插件）：

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })               // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

每個(gè)插件還在一個(gè)Constructor屬性上公開它的原始構(gòu)造函數(shù)：$.fn.popover.Constructor。如果你想獲得一個(gè)特定的插件實(shí)例，直接從一個(gè)元素中獲?。?code>$('[rel="popover"]').data('popover')。

異步函數(shù)和轉(zhuǎn)換

所有程序化API方法都是異步的，并在轉(zhuǎn)換開始之后但結(jié)束之前返回給調(diào)用者。

為了在轉(zhuǎn)換完成后執(zhí)行一個(gè)操作，您可以偵聽相應(yīng)的事件。

$('#myCollapse').on('shown.bs.collapse', function (e) {  
    // Action to execute once the collapsible area is expanded
})

另外，對(duì)轉(zhuǎn)換組件的方法調(diào)用將被忽略。

$('#myCarousel').on('slid.bs.carousel', function (e) {  
    $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

默認(rèn)設(shè)置

您可以通過修改插件的Constructor.Default對(duì)象來更改插件的默認(rèn)設(shè)置：

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

無沖突

有時(shí)，需要在其他UI框架中使用引導(dǎo)插件。在這種情況下，名稱空間沖突可能會(huì)偶爾發(fā)生。如果發(fā)生這種情況，你可以打電話給.noConflict的值。

var bootstrapButton = $.fn.button.noConflict()             // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

版本號(hào)

可以通過VERSION插件構(gòu)造函數(shù)的屬性。例如，對(duì)于工具提示插件：

$.fn.tooltip.Constructor.VERSION // => "4.0.0-beta.2"

禁用JavaScript時(shí)沒有特殊的后遺癥

當(dāng)JavaScript禁用時(shí)，Bootstrap的插件不會(huì)特別優(yōu)雅地回退。如果您在這種情況下關(guān)心用戶體驗(yàn)，請(qǐng)向用戶<noscript>解釋情況（以及如何重新啟用JavaScript），和/或添加您自己的自定義回退。

第三方圖書館

引導(dǎo)程序不正式支持第三方JavaScript庫。比如Prototype或jQueryUI。盡管.noConflict以及命名空間事件，可能存在需要自己解決的兼容性問題。

功用

所有Bootstrap的JavaScript文件都依賴于util.js它，它必須與其他JS文件一起包含。如果您使用編譯過的（或縮小版）bootstrap.js，則不需要包含它 - 它已經(jīng)存在。

util.js包括實(shí)用程序函數(shù)和基本助手transitionEnd事件以及CSS轉(zhuǎn)換模擬器。其他插件使用它來檢查CSS轉(zhuǎn)換支持和捕捉掛起的轉(zhuǎn)換。