BootStrap插件

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

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

  不要嘗試同時引用這兩個文件，由於  bootstrap.js 和  bootstrap.min.js 都包含了全部的插件。

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

某些時候 Bootstrap 插件可能須要與其餘 UI 框架一塊兒使用。在這種狀況下，可能會發生命名空間衝突。若是不幸發生了這種狀況，你能夠經過調用插件的 .noConflict 方法恢復其原始值。

若是您想要單獨引用該插件的功能，那麼除了其餘的 JS 文件，您還須要引用 transition.js。

Transition.js 是 transitionEnd 事件和 CSS 過渡效果模擬器的基本幫助器類

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

若是您想要單獨引用該插件的功能，那麼您須要引用 modal.js。

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

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

類	默認值	描述
backdrop	boolean或string static 默認值：true	指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框
keyborad	boolean：true	按下escape鍵時關閉模態框，設置位false時則無效
show	boolean：true	初始化顯示模態框
remote	path：false	若是添加一個有效的url的href，則會加載其中的內容

與modal()一塊兒使用的有用的方法

方法	描述	實例
Options：modal(options)	把內容做爲模態框激活	$('#identifier').modal({keyboard:false})
Toggle:modal('toggle')	切換模態框	$('#identifier').modal('toggle')
Show：modal（'show'）	手動打開模態框	$('#identifier').modal('show')
Hide:modal('hide')	手動隱藏模態框	$('#identifier').modal('hide')

事件，在函數中當鉤子使用

事件	描述	實例
show.bs.modal	在調用show方法後觸發	$('#identifier').on('show.bs.modal',function（）｛｝)
shown.bs.modal	當模態框對用戶觸發可見時	$('#identifier').on('show.bs.modal',function（）｛｝)
hide.bs.modal	當調用hide實例方法時觸發	$('#identifier').on('hide.bs.modal',function（）｛｝
hidden.bs.modal	當模態框徹底對用戶隱藏時觸發	$('#identifier').on('hidden.bs.modal',function（）｛｝

下拉菜單（Dropdown）插件的隱藏內容：經過 data 屬性：向連接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單

若是您須要保持連接完整（在瀏覽器不啓用 JavaScript 時有用），請使用 data-target 屬性代替 href="#"：

下拉菜單切換有一個簡單的方法用來顯示或隱藏下拉菜單$(data-toggle).dropdown('toggle')

滾動監聽（Scrollspy）插件，即自動更新導航插件，會根據滾動條的位置自動更新對應的導航目標。

經過 data 屬性：向您想要監聽的元素（一般是 body）添加 data-spy="scroll"。而後添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。

經過 JavaScript：您能夠經過 JavaScript 調用滾動監聽，選取要監聽的元素，而後調用 .scrollspy() 函數：

$('body').scrollspy({ target: '.navbar-example' })

.scrollspy('refresh')：當經過 JavaScript 調用 scrollspy 方法時，您須要調用 .refresh 方法來更新 DOM

activate.bs.scrollspy每當一個新項目被滾動監聽激活時，觸發該事件

激活各個標籤：

// 經過名稱選取標籤頁 $('#myTab a[href="#profile"]').tab('show') // 選取第一個標籤頁 $('#myTab a:first').tab('show') // 選取最後一個標籤頁 $('#myTab a:last').tab('show') // 選取第三個標籤頁（從 0 開始索引） $('#myTab li:eq(2) a').tab('show')

若是須要爲標籤頁設置淡入淡出效果，請添加 .fade 到每一個 .tab-pane 後面。
.$().tab：該方法能夠激活標籤頁元素和內容容器。

當您想要描述一個連接的時候，提示工具（Tooltip）就顯得很是有用。
需添加一個提示工具（tooltip），只需向一個錨標籤添加 data-toggle="tooltip" 便可。
彈出框（Popover）：如需添加一個彈出框（popover），只需向一個錨/按鈕標籤添加 data-toggle="popover" 便可。
摺疊：

1. data-toggle="collapse" 添加到您想要展開或摺疊的組件的連接上。
2. href 或 data-target 屬性添加到父組件，它的值是子組件的 id。
3. data-parent 屬性把摺疊面板（accordion）的 id 添加到要展開或摺疊的組件的連接

Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。