Bootstrap插件

1 BootStrap插件使用規則

1.1 單個引入

JavaScript 插件能夠單個引入（使用 Bootstrap 提供的單個 *.js 文件），或者一次性所有引入（使用 bootstrap.js 或壓縮版的 bootstrap.min.js）。

某些插件和 CSS 組件依賴於其它插件。若是你是單個引入每一個插件的，請確保在文檔中檢查插件之間的依賴關係。注意，全部插件都依賴 jQuery （也就是說，jQuery必須在全部插件以前引入頁面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

1.2 data屬性

你能夠僅僅經過 data 屬性 API 就能使用全部的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式。

話又說回來，在某些狀況下可能須要將此功能關閉。所以，咱們還提供了關閉 data 屬性 API 的方法，即解除以 data-api 爲命名空間並綁定在文檔上的事件。就像下面這樣：

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

另外，若是是針對某個特定的插件，只需在 data-api 前面添加那個插件的名稱做爲命名空間，以下：

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

1.3 編程方式的 API

咱們爲全部 Bootstrap 插件提供了純 JavaScript 方式的 API。全部公開的 API 都是支持單獨或鏈式調用方式，而且返回其所操做的元素集合（注：和jQuery的調用形式一致）。

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

全部方法均可以接受一個可選的 option 對象做爲參數，或者一個表明特定方法的字符串，或者什麼也不提供（在這種狀況下，插件將會以默認值初始化）：

$('#myModal').modal() // 以默認值初始化 $('#myModal').modal({ keyboard: false }) // initialized with no keyboard $('#myModal').modal('show') // 初始化後當即調用 show 方法 

每一個插件還經過 Constructor 屬性暴露了其原始的構造函數：$.fn.popover.Constructor。若是你想獲取某個插件的實例，能夠直接經過頁面元素獲取：$('[rel="popover"]').data('popover')。

默認設置

每一個插件均可以經過修改其自身的 Constructor.DEFAULTS 對象從而改變插件的默認設置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 將模態框插件的 `keyboard` 默認選參數置爲 false 

1.4 避免命名空間衝突

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

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

1.5 事件

Bootstrap 爲大部分插件所具備的動做提供了自定義事件。通常來講，這些事件都有不定式和過去式兩種動詞的命名形式，例如，不定式形式的動詞（例如 show）表示其在事件開始時被觸發；而過去式動詞（例如 shown ）表示在動做執行完畢以後被觸發。

從 3.0.0 版本開始，全部 Bootstrap 事件的名稱都採用命名空間方式。

全部以不定式形式的動詞命名的事件都提供了 preventDefault 功能。這就賦予你在動做開始執行前將其中止的能力。

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

1.6 版本號

每一個 Bootstrap 的 jQuery 插件的版本號均可以經過插件的構造函數上的 VERSION 屬性獲取到。例如工具提示框（tooltip）插件：

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

2 過渡效果 transition.js

2.1 關於過渡效果

對於簡單的過渡效果，只需將 transition.js 和其它 JS 文件一塊兒引入便可。若是你使用的是編譯（或壓縮）版的 bootstrap.js 文件，就無需再單獨將其引入了。

2.3 包含的內容

Transition.js 是針對 transitionEnd 事件的一個基本輔助工具，也是對 CSS 過渡效果的模擬。它被其它插件用來檢測當前瀏覽器對是否支持 CSS 的過渡效果。

2.4 禁用過分效果

經過下面的 JavaScript 代碼能夠在全局範圍禁用過渡效果，而且必須將此代碼放在 transition.js （或 bootstrap.js 或 bootstrap.min.js）後面，確保在 js 文件加載完畢後再執行下面的代碼：

$.support.transition = false

3 模態框 modal.js

務必將模態框的 HTML 代碼放在文檔的最高層級內（也就是說，儘可能做爲 body 標籤的直接子元素），以免其餘組件影響模態框的展示和/或功能。

3.1 模態框定義

<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

3.2 按鈕

<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> 

3.3 模態框尺寸

<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> ... </div> </div> </div> <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> ... </div> </div> </div> 

3.4 禁止動畫效果

若是你不須要模態框彈出時的動畫效果（淡入淡出效果），刪掉 .fade 類便可。

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..."> ... </div> 

3.5 模態框中使用柵格系統

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div> <div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

3.6 基於觸發器按鈕的不一樣模態內容

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> ...more buttons... <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> 

$('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('whatever') // Extract info from data-* attributes // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) modal.find('.modal-title').text('New message to ' + recipient) modal.find('.modal-body input').val(recipient) }) 

3.7 經過JavaScript處理模態框

打開

$('#myModal').modal(options) 

參數

名稱	類型	默認值	描述
backdrop	boolean 或 字符串 'static'	true	I指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
keyboard	boolean	true	鍵盤上的 esc 鍵被按下時關閉模態框。
show	boolean	true	模態框初始化以後就當即顯示出來。
remote	path	false	This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.loadyourself.若是提供的是 URL，將利用 jQuery 的 load 方法今後 URL 地址加載要展現的內容（只加載一次）並插入 .modal-content 內。若是使用的是 data 屬性 API，還能夠利用 href 屬性指定內容來源地址。下面是一個實例：<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

方法

.modal(options)

將頁面中的某塊內容做爲模態框激活。接受可選參數 object。

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

手動打開或關閉模態框。在模態框顯示或隱藏以前返回到主調函數中（也就是，在觸發 shown.bs.modal 或 hidden.bs.modal 事件以前）。

$('#myModal').modal('toggle')

.modal('show')

手動打開模態框。在模態框顯示以前返回到主調函數中 （也就是，在觸發 shown.bs.modal 事件以前）。

$('#myModal').modal('show')

.modal('hide')

手動隱藏模態框。在模態框隱藏以前返回到主調函數中 （也就是，在觸發 hidden.bs.modal 事件以前）。

$('#myModal').modal('hide')

.modal('handleUpdate')

整模態的定位，以對抗滾動條，以防出現一個模式，這會使模態向左跳

只須要當模態的高度在打開時改變。

$('#myModal').modal('handleUpdate')

事件

Bootstrap 的模態框類提供了一些事件用於監聽並執行你本身的代碼。

事件類型	描述
show.bs.modal	show 方法調用以後當即觸發該事件。若是是經過點擊某個做爲觸發器的元素，則此元素能夠經過事件的 relatedTarget 屬性進行訪問。
shown.bs.modal	此事件在模態框已經顯示出來（而且同時在 CSS 過渡效果完成）以後被觸發。若是是經過點擊某個做爲觸發器的元素，則此元素能夠經過事件的 relatedTarget 屬性進行訪問。
hide.bs.modal	hide 方法調用以後當即觸發該事件。
hidden.bs.modal	此事件在模態框被隱藏（而且同時在 CSS 過渡效果完成）以後被觸發。
loaded.bs.modal	從遠端的數據源加載完數據以後觸發該事件。

$('#myModal').on('hidden.bs.modal', function (e) { // do something... }) 

4 下拉菜單 dropdown.js

4.1 JavaScript調用

$('.dropdown-toggle').dropdown() 

方法

$().dropdown('toggle')

Toggles the dropdown menu of a given navbar or tabbed navigation.

事件

Event Type	Description
show.bs.dropdown	This event fires immediately when the show instance method is called.
shown.bs.dropdown	This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown	This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown	This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

$('#myDropdown').on('show.bs.dropdown', function () { // do something… }) 

5 滾動監聽 scrollspy.js

滾動監聽插件是用來根據滾動條所處的位置來自動更新導航項的。滾動導航條下面的區域並關注導航項的變化。下拉菜單中的條目也會自動高亮顯示。

依賴 Bootstrap 的導航組件

滾動監聽插件依賴 Bootstrap 的導航組件用於高亮顯示當前激活的連接。

不管何種實現方式，滾動監聽都須要被監聽的組件是 position: relative; 即相對定位方式。大多數時候是監聽 <body> 元素

5.1 基本調用

body { position: relative; } 

<body data-spy="scroll" data-target="#navbar-example"> ... <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> ... </body> 

5.2 JavaScript調用

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

方法

.scrollspy('refresh')

當使用滾動監聽插件的同時在 DOM 中添加或刪除元素後，你須要像下面這樣調用此刷新（ refresh） 方法：

$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }) 

參數

能夠經過 data 屬性或 JavaScript 傳遞參數。對於 data 屬性，其名稱是將參數名附着到 data- 後面組成，例如 data-offset=""。

名稱	類型	默認值	描述
offset	number	10	計算滾動位置時相對於頂部的偏移量（像素數）。

事件

事件類型	描述
activate.bs.scrollspy	每當一個新條目被激活後都將由滾動監聽插件觸發此事件。

$('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… }) 

6 標籤頁 tab.js

6.1 基本使用

<div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div> 

6.2 Fade特效

<div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="home">...</div> <div role="tabpanel" class="tab-pane fade" id="profile">...</div> <div role="tabpanel" class="tab-pane fade" id="messages">...</div> <div role="tabpanel" class="tab-pane fade" id="settings">...</div> </div> 

6.3 JavaScript調用

$('#myTabs a').click(function (e) { e.preventDefault() $(this).tab('show') }) 

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name $('#myTabs a:first').tab('show') // Select first tab $('#myTabs a:last').tab('show') // Select last tab $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed) 

方法

$().tab

該方法能夠激活標籤頁元素和內容容器。標籤頁須要用一個 data-target 或者一個指向 DOM 中容器節點的 href。

.tab('show')

Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tabevent occurs).

$('#someTab').tab('show') 

事件

事件	描述	實例
show.bs.tab	該事件在標籤頁顯示時觸發，可是必須在新標籤頁被顯示以前。分別使用 event.target 和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。	$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的標籤頁 e.relatedTarget // 前一個激活的標籤頁 })
shown.bs.tab	該事件在標籤頁顯示時觸發，可是必須在某個標籤頁已經顯示以後。分別使用 event.target和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的標籤頁 e.relatedTarget // 前一個激活的標籤頁 })

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) 

7 工具提示 tooltips.js

7.1 基本使用

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 

7.2 JavaScript調用

$('#example').tooltip(options) 

參數

選項名稱	類型/默認值	Data 屬性名稱	描述
animation	boolean 默認值：true	data-animation	提示工具使用 CSS 漸變濾鏡效果。
html	boolean 默認值：false	data-html	向提示工具插入 HTML。若是爲 false，jQuery 的 text 方法將被用於向 dom 插入內容。若是您擔憂 XSS 攻擊，請使用 text。
placement	string\	function 默認值：top	data-placement	規定如何定位提示工具（即 top\	bottom\	left\	right\	auto）。 當指定爲 auto 時，會動態調整提示工具。例如，若是 placement 是 "auto left"，提示工具將會盡量顯示在左邊，在狀況不容許的狀況下它纔會顯示在右邊。
selector	string 默認值：false	data-selector	若是提供了一個選擇器，提示工具對象將被委派到指定的目標。
title	string \	function 默認值：''	data-title	若是未指定 title 屬性，則 title 選項是默認的 title 值。
trigger	string 默認值：'hover focus'	data-trigger	定義如何觸發提示工具： **click\	hover \	focus \	manual**。您能夠傳遞多個觸發器，每一個觸發器之間用空格分隔。
delay	number \	object 默認值：0	data-delay	延遲顯示和隱藏提示工具的毫秒數 - 對 manual 手動觸發類型不適用。若是提供的是一個數字，那麼延遲將會應用於顯示和隱藏。若是提供的是對象，結構以下所示：delay: { show: 500, hide: 100 }
container	string \	false 默認值：false	data-container	向指定元素追加提示工具。 實例： container: 'body'

方法

方法	描述	實例
Options: .tooltip(options)	向元素集合附加提示工具句柄。	$().tooltip(options)
Toggle: .tooltip('toggle')	切換顯示/隱藏元素的提示工具。	$('#element').tooltip('toggle')
Show: .tooltip('show')	顯示元素的提示工具。	$('#element').tooltip('show')
Hide: .tooltip('hide')	隱藏元素的提示工具。	$('#element').tooltip('hide')
Destroy: .tooltip('destroy')	隱藏並銷燬元素的提示工具。	$('#element').tooltip('destroy')

$('#element').tooltip('destroy') 

事件

事件	描述	實例
show.bs.tooltip	當調用 show 實例方法時當即觸發該事件。	$('#myTooltip').on('show.bs.tooltip', function () { // 執行一些動做... })
shown.bs.tooltip	當提示工具對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。	$('#myTooltip').on('shown.bs.tooltip', function () { // 執行一些動做... })
hide.bs.tooltip	當調用 hide 實例方法時當即觸發該事件。	$('#myTooltip').on('hide.bs.tooltip', function () { // 執行一些動做... })
hidden.bs.tooltip	當提示工具對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。	$('#myTooltip').on('hidden.bs.tooltip', function () { // 執行一些動做... })

$('#myTooltip').on('hidden.bs.tooltip', function () { // do something… }) 

8 彈出框 popover.js

8.1 基本使用

基本

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">點我彈出/隱藏彈出框</button> 

彈出方向

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 左側 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 頂部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 底部 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on 右側 </button> 

點擊並讓彈出框消失

經過使用 focus 觸發器能夠在用戶點擊彈出框是讓其消失。

實現「點擊並讓彈出框消失」的效果須要一些額外的代碼

爲了更好的跨瀏覽器和跨平臺效果，你必須使用 <a> 標籤，不能使用 <button> 標籤，而且，還必須包含 role="button" 和 tabindex 屬性。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的彈出框</a> 

8.2 javaScript調用

$('#example').popover(options) 

參數

能夠經過 data 屬性或 JavaScript 傳遞參數。對於 data 屬性，將參數名附着到 data- 後面，例如 data-animation=""。

選項名稱	類型/默認值	Data 屬性名稱	描述
animation	boolean 默認值：true	data-animation	向彈出框應用 CSS 褪色過渡效果。
html	boolean 默認值：false	data-html	向彈出框插入 HTML。若是爲 false，jQuery 的 text 方法將被用於向 dom 插入內容。若是您擔憂 XSS 攻擊，請使用 text。
placement	string\	function 默認值：top	data-placement	規定如何定位彈出框（即 top\	bottom\	left\	right\	auto）。 當指定爲 auto 時，會動態調整彈出框。例如，若是 placement 是 "auto left"，彈出框將會盡量顯示在左邊，在狀況不容許的狀況下它纔會顯示在右邊。
selector	string 默認值：false	data-selector	若是提供了一個選擇器，彈出框對象將被委派到指定的目標。
title	string \	function 默認值：''	data-title	若是未指定 title 屬性，則 title 選項是默認的 title 值。
trigger	string 默認值：'hover focus'	data-trigger	定義如何觸發彈出框： **click\	hover \	focus \	manual**。您能夠傳遞多個觸發器，每一個觸發器之間用空格分隔。
delay	number \	object 默認值：0	data-delay	延遲顯示和隱藏彈出框的毫秒數 - 對 manual 手動觸發類型不適用。若是提供的是一個數字，那麼延遲將會應用於顯示和隱藏。若是提供的是對象，結構以下所示：delay: { show: 500, hide: 100 }
container	string \	false 默認值：false	data-container	向指定元素追加彈出框。 實例： container: 'body'

方法

方法	描述	實例
Options: .popover(options)	向元素集合附加彈出框句柄。	$().popover(options)
Toggle: .popover('toggle')	切換顯示/隱藏元素的彈出框。	$('#element').popover('toggle')
Show: .popover('show')	顯示元素的彈出框。	$('#element').popover('show')
Hide: .popover('hide')	隱藏元素的彈出框。	$('#element').popover('hide')
Destroy: .popover('destroy')	隱藏並銷燬元素的彈出框。	$('#element').popover('destroy')

$('#element').popover('destroy') 

事件

事件	描述	實例
show.bs.popover	當調用 show 實例方法時當即觸發該事件。	$('#mypopover').on('show.bs.popover', function () { // 執行一些動做... })
shown.bs.popover	當彈出框對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。	$('#mypopover').on('shown.bs.popover', function () { // 執行一些動做... })
hide.bs.popover	當調用 hide 實例方法時當即觸發該事件。	$('#mypopover').on('hide.bs.popover', function () { // 執行一些動做... })
hidden.bs.popover	當工具提示對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。	$('#mypopover').on('hidden.bs.popover', function () { // 執行一些動做... })

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

9 警告信息 alert.js

9.1 基本使用

當使用 .close 按鈕時，它必須是 .alert-dismissible 的第一個子元素，而且在它以前不能有任何文本內容。

爲關閉按鈕添加 data-dismiss="alert" 屬性就可使其自動爲警告框賦予關閉功能。關閉警告框也就是將其從 DOM 中刪除。

<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> 

爲了讓警告框在關閉時表現出動畫效果，請確保爲其添加了 .fade 和 .in 類。

9.2 JavaScript調用

方法

$().alert()

讓警告框監聽具備 data-dismiss="alert" 屬性的後裔元素的點擊（click）事件。（若是是經過 data 屬性進行的初始化則無需使用）

$().alert('close')

關閉警告框並從 DOM 中將其刪除。若是警告框被賦予了 .fade 和 .in 類，那麼，警告框在淡出以後纔會被刪除。

事件

Bootstrap 的警告框插件對外暴露了一些能夠被監聽的事件。

事件類型	描述
close.bs.alert	當 close 方法被調用後當即觸發此事件。
closed.bs.alert	當警告框被關閉後（也即 CSS 過渡效果完畢以後）當即觸發此事件。

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

10 按鈕 button.js

10.1 加載狀態

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state </button> <script> $('#myButton').on('click', function () { var $btn = $(this).button('loading') // business logic... $btn.button('reset') }) </script> 

10.2 獨立的按鈕切換狀態

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button> 

10.3 Checkbox和Radio

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div> 

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 </label> </div> 

10.4 JavaScript方法

方法	描述	實例
button('toggle')	切換按壓狀態。賦予按鈕被激活的外觀。您可使用 data-toggle 屬性啓用按鈕的自動切換。	$().button('toggle')
.button('loading')	當加載時，按鈕是禁用的，且文本變爲 button 元素的 data-loading-text 屬性的值。	$().button('loading')
.button('reset')	重置按鈕狀態，文本內容恢復爲最初的內容。當您想要把按鈕返回爲原始的狀態時，該方法很是有用。	$().button('reset')
.button(string)	該方法中的字符串是指由用戶聲明的任何字符串。使用該方法，重置按鈕狀態，並添加新的內容。	$().button(string)

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off"> ... </button> <script> $('#myStateButton').on('click', function () { $(this).button('complete') // button text will be "finished!" }) </script> 

11 摺疊 collapse.js

11.1 基本使用

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> <div class="collapse" id="collapseExample"> <div class="well"> ... </div> </div> 

11.2 手風琴菜單

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> 

It's also possible to swap out .panel-bodys with .list-groups.

11.3 JavaScript調用

$('.collapse').collapse() 

選項

選項名稱	類型/默認值	Data 屬性名稱	描述
parent	selector 默認值：false	data-parent	若是提供了一個選擇器，當可摺疊項目顯示時，指定父元素下的全部可摺疊的元素將被關閉。這與傳統的摺疊面板（accordion）的行爲相似 - 這依賴於 accordion-group 類。
toggle	boolean 默認值：true	data-toggle	切換調用可摺疊元素。

方法

方法	描述	實例
Options:.collapse(options)	激活內容爲可摺疊元素。接受一個可選的 options 對象。	$('#identifier').collapse({ toggle: false })
Toggle:.collapse('toggle')	切換顯示/隱藏可摺疊元素。	$('#identifier').collapse('toggle')
Show:.collapse('show')	顯示可摺疊元素。	$('#identifier').collapse('show')
Hide:.collapse('hide')	隱藏可摺疊元素。	$('#identifier').collapse('hide')

事件

事件	描述	實例
show.bs.collapse	在調用 show 方法後觸發該事件。	$('#identifier').on('show.bs.collapse', function () { // 執行一些動做... })
shown.bs.collapse	當摺疊元素對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。	$('#identifier').on('shown.bs.collapse', function () { // 執行一些動做... })
hide.bs.collapse	當調用 hide 實例方法時當即觸發該事件。	$('#identifier').on('hide.bs.collapse', function () { // 執行一些動做... })
hidden.bs.collapse	當摺疊元素對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。	$('#identifier').on('hidden.bs.collapse', function () { // 執行一些動做... })

$('#myCollapsible').on('hidden.bs.collapse', function () { // do something… }) 

12 輪播 carousel.js

12.1 基本使用

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

12.2 每一個項目的標題

<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div> 

12.3 JavaScript 調用

$('.carousel').carousel() 

選項

選項名稱	類型/默認值	Data 屬性名稱	描述
interval	number 默認值：5000	data-interval	自動循環每一個項目之間延遲的時間量。若是爲 false，輪播將不會自動循環。
pause	string 默認值："hover"	data-pause	鼠標進入時暫停輪播循環，鼠標離開時恢復輪播循環。
wrap	boolean 默認值：true	data-wrap	輪播是否連續循環。

方法

方法	描述	實例
.carousel(options)	初始化輪播爲可選的 options 對象，並開始循環項目。	$('#identifier').carousel({ interval: 2000 })
.carousel('cycle')	從左到右循環輪播項目。	$('#identifier').carousel('cycle')
.carousel('pause')	中止輪播循環項目。	$('#identifier').carousel('pause')
.carousel(number)	循環輪播到某個特定的幀（從 0 開始計數，與數組相似）。	$('#identifier').carousel(number)
.carousel('prev')	循環輪播到上一個項目。	$('#identifier').carousel('prev')
.carousel('next')	循環輪播到下一個項目。	$('#identifier').carousel('next')

事件

事件	描述	實例
slide.bs.carousel	當調用 slide 實例方法時當即觸發該事件。	$('#identifier').on('slide.bs.carousel', function () { // 執行一些動做... })
slid.bs.carousel	當輪播完成幻燈片過渡效果時觸發該事件。	$('#identifier').on('slid.bs.carousel', function () { // 執行一些動做... })

$('#myCarousel').on('slide.bs.carousel', function () { // do something… }) 

13 附加 affix.js

12.1 基本使用

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> ... </div> 

13.2 JavaScript調用

Call the affix plugin via JavaScript:

$('#myAffix').affix({ offset: { top: 100, bottom: function () { return (this.bottom = $('.footer').outerHeight(true)) } } }) 

選項

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name	type	default	description
offset	number \	function \	object	10	Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset.
target	selector \	node \	jQuery element	the windowobject	Specifies the target element of the affix.

方法

$().affix(options)

Activates your content as affixed content. Accepts an optional options object.

$('#myAffix').affix({
  offset: 15
})

$().affix('checkPosition')

Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The .affix, .affix-top, and .affix-bottom classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.

$('#myAffix').affix('checkPosition')

事件

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.

 

Event Type	Description
affix.bs.affix	This event fires immediately before the element has been affixed.
affixed.bs.affix	This event is fired after the element has been affixed.
affix-top.bs.affix	This event fires immediately before the element has been affixed-top.
affixed-top.bs.affix	This event is fired after the element has been affixed-top.
affix-bottom.bs.affix	This event fires immediately before the element has been affixed-bottom.
affixed-bottom.bs.affix	This event is fired after the element has been affixed-bottom.