Bootstrap 外掛概述

前面章節中佈局元件部分討論的元件僅僅是個開始。Bootstrap 內建了 12 個 jQuery 外掛，這些外掛擴充套件了功能，並可以為您的網站新增更多互動性。要開始使用 Bootstrap 的 JavaScript 外掛，您不需要成為高階 JavaScript 開發人員。透過利用 Bootstrap 資料 API，大多數外掛無需編寫任何程式碼即可觸發。

Bootstrap 外掛可以透過兩種形式包含在您的網站中：

單獨 - 使用 Bootstrap 的單個 *.js 檔案。某些外掛和 CSS 元件依賴於其他外掛。如果您單獨包含外掛，請務必在文件中檢查這些依賴項。
或編譯（一次全部） - 使用 bootstrap.js 或最小化版本的 bootstrap.min.js。不要嘗試同時包含兩者，因為 bootstrap.js 和 bootstrap.min.js 都將所有外掛包含在一個檔案中。

所有外掛都依賴於 jQuery。因此，必須在外掛檔案之前包含 jQuery。檢視 bower.json 以瞭解支援哪些版本的 jQuery。

資料屬性

所有 Bootstrap 外掛都可以使用包含的資料 API 訪問。因此，您不需要編寫任何 JavaScript 程式碼即可呼叫任何外掛功能。
在某些情況下，可能需要關閉資料 API 的此功能。如果您需要關閉資料 API，您可以透過新增以下 JavaScript 程式碼來取消繫結屬性：

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

要關閉特定/單個外掛，只需將外掛名稱作為名稱空間與 data-api 名稱空間一起包含，如下所示：

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

程式設計 API

Bootstrap 的開發者認為您應該能夠完全透過 JavaScript API 來使用所有外掛。所有公共 API 都是單一的、可鏈式呼叫的方法，並返回操作的集合，例如：

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

所有方法都接受一個可選的 options 物件、一個指向特定方法的字串，或者什麼都不接受（這將使用預設行為啟動外掛），如下所示：

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

每個外掛還在 Constructor 屬性上公開其原始建構函式：$.fn.popover.Constructor。如果您想獲取特定外掛例項，請直接從元素中檢索它：

$('[rel = popover]').data('popover').

無衝突

Bootstrap 外掛有時可以與其他 UI 框架一起使用。在這些情況下，有時會發生名稱空間衝突。要克服這個問題，請對您希望恢復其值的外掛呼叫 .noConflict。

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

事件

Bootstrap 為大多數外掛的獨特操作提供自定義事件。通常，這些事件有兩種形式：

動詞不定式形式 - 這在事件開始時觸發。例如：show。不定式事件提供 preventDefault 功能。這提供了在操作開始之前停止其執行的能力。

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

過去分詞形式 - 這在操作完成時觸發。例如：shown.

列印頁面