1.Bootstrap 插件概覽

在前面 布局組件 章節中所討論到的組件僅僅是個開始。Bootstrap 自帶 12 種 jQuery 插件，擴展了功能，可以給站點添加更多的互動。即使您不是一名高級的 JavaScript 開發人員，您也可以著手學習 Bootstrap 的 JavaScript 插件。利用 Bootstrap 數據 API（Bootstrap Data API），大部分的插件可以在不編寫任何代碼的情況被觸發。

站點引用 Bootstrap 插件的方式有兩種：

• 單獨引用：使用 Bootstrap 的個別的 *.js 文件。一些插件和 CSS 組件依賴於其他插件。如果您單獨引用插件，請先確保弄清這些插件之間的依賴關系。
• 編譯（同時）引用：使用 bootstrap.js 或壓縮版的 bootstrap.min.js。

  不要嘗試同時引用這兩個文件，因為 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。

所有的插件依賴於 jQuery。所以必須在插件文件之前引用 jQuery。請訪問 bower.json 查看 Bootstrap 當前支持的 jQuery 版本。

1.1data 屬性

• 你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式。
• 話又說回來，在某些情況下可能需要將此功能關閉。因此，我們還提供了關閉 data 屬性 API 的方法，即解除以 data-api為命名空間並綁定在文檔上的事件。就像下面這樣：

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

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

1.2編程方式的 API

我們為所有 Bootstrap 插件提供了純 JavaScript 方式的 API。所有公開的 API 都是支持單獨或鏈式調用方式，並且返回其所操作的元素集合（註：和jQuery的調用形式一致）。例如：

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

所有的方法都可以接受一個可選的選項對象作為參數，或者一個代表特定方法的字符串，或者不帶任何參數（這種情況下，將會初始化插件為默認行為），如下所示：

/ 初始化為默認行為
$("#myModal").modal()    
 // 初始化為不支持鍵盤               
$("#myModal").modal({ keyboard: false })  
// 初始化並立即調用 show
$("#myModal").modal(‘show‘)             

1.3事件

Bootstrap 為大多數插件的獨特行為提供了自定義事件。一般來說，這些事件有兩種形式：

• 動詞不定式：這會在事件開始時被觸發。例如 ex: show。動詞不定式事件提供了 preventDefault 功能。這使得在事件開始前可以停止操作的執行。

  $(‘#myModal‘).on(‘show.bs.modal‘, function (e) {
  // 阻止模態框的顯示
    if (!data) return e.preventDefault() 
  })

• 過去分詞形式：這會在動作執行完畢之後被觸發。例如 ex: shown。

2.Bootstrap 模態框（Modal）插件

模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。

2.1用法

您可以切換模態框（Modal）插件的隱藏內容：

• 通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）。
• 通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框：

$(‘#identifier‘).modal(options)

2.2實例

一個靜態的模態窗口實例，如下面的實例所示：

<h2>創建模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
            </div>
            <div class="modal-body">在這裏添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

代碼講解：

• 使用模態窗口，您需要有某種觸發器。您可以使用按鈕或鏈接。這裏我們使用的是按鈕。
• 如果您仔細查看上面的代碼，您會發現在 <button> 標簽中，data-target="#myModal" 是您想要在頁面上加載的模態框的目標。您可以在頁面上創建多個模態框，然後為每個模態框創建不同的觸發器。現在，很明顯，您不能在同一時間加載多個模塊，但您可以在頁面上創建多個在不同時間進行加載。
• 在模態框中需要註意兩點：
  1. 第一是 .modal，用來把 <div> 的內容識別為模態框。
  2. 第二是 .fade class。當模態框被切換時，它會引起內容淡入淡出。
• aria-labelledby="myModalLabel"，該屬性引用模態框的標題。
• 屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）。
• <div class="modal-header">，modal-header 是為模態窗口的頭部定義樣式的類。
• class="close"，close 是一個 CSS class，用於為模態窗口的關閉按鈕設置樣式。
• data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。
• class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的主體設置樣式。
• class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於為模態窗口的底部設置樣式。
• data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。

2.3方法

$(‘#identifier‘).modal({
keyboard: false
})//把內容作為模態框激活。接受一個可選的選項對象。
$(‘#identifier‘).modal(‘toggle‘)//手動切換模態框。
$(‘#identifier‘).modal(‘show‘)//手動打開模態框。
$(‘#identifier‘).modal(‘hide‘)//手動隱藏模態框。

2.4事件

$(‘#identifier‘).on(‘show.bs.modal‘, function () {
  // 執行一些動作...
})//在調用 show 方法後觸發。

$(‘#identifier‘).on(‘shown.bs.modal‘, function () {
  // 執行一些動作...
})//當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）

$(‘#identifier‘).on(‘hide.bs.modal‘, function () {
  // 執行一些動作...
})//當調用 hide 實例方法時觸發。

$(‘#identifier‘).on(‘hidden.bs.modal‘, function () {
  // 執行一些動作...
})//當模態框完全對用戶隱藏時觸發。

Bootstrap 插件