Bootstrap 自帶組件

Bootstrap 自帶組件

 

插件概覽

在前面《佈局組件》章節中所討論到的組件僅僅是個開始。

Bootstrap 自帶 12 種 jQuery 插件，擴展了功能，可以給站點添加更多的互動。

利用Bootstrap數據API，大部分的插件可以在不編寫任何代碼的情況被觸發。

 

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

單獨引用：使用 Bootstrap 的個別的 *.js 文件。

編譯（同時）引用：使用 bootstrap.js 或壓縮版的 bootstrap.min.js。

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

 

data 屬性

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

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

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

如需關閉一個特定的插件，只需要在 data-api 命名空間前加上該插件的名稱作爲命名空間即可，如下所示：

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

 

編程方式的 API

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

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

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

// 初始化爲默認行爲

$("#myModal").modal()    

 // 初始化爲不支持鍵盤               

$("#myModal").modal({ keyboard: false })  // 初始化並立即調用 show

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

每個插件在 Constructor 屬性上也暴露了其原始的構造函數：$.fn.popover.Constructor。如果您想獲取某個特定插件的實例，可以直接通過頁面元素獲取：

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

 

避免命名空間衝突

某些時候 Bootstrap 插件可能需要與其他 UI 框架一起使用。在這種情況下，可能會發生命名空間衝突。如果不幸發生了這種情況，你可以通過調用插件的 .noConflict 方法恢復其原始值。

// 返回 $.fn.button 之前所賦的值

var bootstrapButton = $.fn.button.noConflict()

// 爲 $().bootstrapBtn 賦予 Bootstrap 功能

$.fn.bootstrapBtn = bootstrapButton         

 

1.過渡效果（Transition）插件，淡入淡出

使用.fade的class

 

2.模態框（Modal）插件，彈出框

2.1基本模態框

觸發button：data-toggle="modal"  data-target="#myModal"

模態框div：class="modal fade"  id="myModal"

aria-labelledby="myModalLabel"，該屬性引用模態框的標題。

aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發爲止（比如點擊在相關的按鈕上）。

 

<!-- 按鈕觸發模態框 -->

<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>

    </div>

</div>

2.2模態框結構

<div class="modal-dialog">

  <div class="modal-content">

    <div class="modal-header">

      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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-dialog -->

2.3選項

選項名稱	類型/默認值	Data 屬性名稱	描述
backdrop	boolean 或 string 'static' 默認值：true	data-backdrop	指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
keyboard	boolean 默認值：true	data-keyboard	當按下 escape 鍵時關閉模態框，設置爲 false 時則按鍵無效。
show	boolean 默認值：true	data-show	當初始化時顯示模態框。
remote	path 默認值：false	data-remote	使用 jQuery .load 方法，爲模態框的主體注入內容。如果添加了一個帶有有效 URL 的 href，則會加載其中的內容。如下面的實例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">請點擊我</a>

2.4方法

下面是一些可與 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')

範例：

<script>

$(function() {

    $('#myModal').modal({

        keyboard: true

    })

});

</script>

2.5事件

下表列出了模態框中要用到事件。這些事件可在函數中當鉤子使用。

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

 

3.切換下拉菜單（Dropdown）

通過 data 屬性：向鏈接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單，如下所示：

<div class="dropdown">

  <a data-toggle="dropdown" href="#">下拉菜單（Dropdown）觸發器</a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    ...

  </ul></div>

 

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

<div class="dropdown">

  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">

    下拉菜單（Dropdown） <span class="caret"></span>

  </a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    ...

  </ul></div>

 

通過 JavaScript：通過 JavaScript 調用下拉菜單切換，請使用下面的方法：

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

 

4.滾動監聽（Scrollspy）插件

向您想要監聽的元素（通常是 body）添加 data-spy="scroll"和 data-target

爲滾動時觸發添加父<div>，有名爲data-target的class或id

<body data-spy="scroll" data-target=".navbar-example">

<div class="navbar-example">

<ul class="nav nav-tabs">

...

</ul></div>

</body>

4.1事件

下表列出了滾動監聽中要用到事件。這些事件可在函數中當鉤子使用。

事件	描述	實例
activate.bs.scrollspy	每當一個新項目被滾動監聽激活時，觸發該事件。	$('#myScrollspy').on('activate.bs.scrollspy', function () {   // 執行一些動作...})

 

5.標籤頁（Tab）插件

5.1通過 data 屬性：

<ul class="nav nav-tabs">

<li><a href="#identifier" data-toggle="tab">Home</a></li>

</ul>

通過 JavaScript：

$('#myTab a').click(function (e) {

  e.preventDefault()

  $(this).tab('show')

})

5.2淡入淡出效果

如果需要爲標籤頁設置淡入淡出效果，請添加 .fade 到每個 .tab-pane 後面。第一個標籤頁必須添加 .in 類，以便淡入顯示初始內容，如下面實例所示：

<div class="tab-content">

<div class="tab-pane fade in active" id="home">...</div>

<div class="tab-pane fade" id="svn">...</div>

<div class="tab-pane fade" id="ios">...</div>

<div class="tab-pane fade" id="java">...</div>

</div>

5.3事件

下表列出了標籤頁（Tab）插件中要用到的事件。這些事件可在函數中當鉤子使用。

事件	描述	實例
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 // 前一個激活的標籤頁})

 

6.提示工具（Tooltip）插件

提示工具（Tooltip）插件不像之前所討論的下拉菜單及其他插件那樣，它不是純 CSS 插件。如需使用該插件，您必須使用 jquery 激活它（讀取 javascript）。使用下面的腳本來啓用頁面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

 

6.1通過 data 屬性：

如需添加一個提示工具（tooltip），只需向一個錨標籤添加 data-toggle="tooltip" 即可。錨的 title 即爲提示工具（tooltip）的文本。默認情況下，插件把提示工具（tooltip）設置在頂部。

<a href="#" data-toggle="tooltip" title="Example tooltip">請懸停在我的上面</a>

通過 JavaScript：

通過 JavaScript 觸發提示工具（tooltip）：

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

 

6.2選項

有一些選項是通過 Bootstrap 數據 API（Bootstrap Data API）添加或通過 JavaScript 調用的。下表列出了這些選項：

選項名稱	類型/默認值	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。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。
content	string | function 默認值：''	data-content	如果未指定 data-content 屬性，則使用默認的 content 值。
delay	number | object 默認值：0	data-delay	延遲顯示和隱藏提示工具的毫秒數 - 對 manual 手動觸發類型不適用。如果提供的是一個數字，那麼延遲將會應用於顯示和隱藏。如果提供的是對象，結構如下所示： delay:{ show: 500, hide: 100 }
container	string | false 默認值：false	data-container	向指定元素追加提示工具。 實例： container: 'body'

 

6.3方法

下面是一些提示工具（Tooltip）插件中有用的方法：

方法	描述	實例
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')

 
6.4事件

下表列出了提示工具（Tooltip）插件中要用到的事件。這些事件可在函數中當鉤子使用。

事件	描述	實例
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 () {   // 執行一些動作...})

 

7.彈出框（Popover）插件

彈出框（Popover）插件不像之前所討論的下拉菜單及其他插件那樣，它不是純 CSS 插件。如需使用該插件，您必須使用 jquery 激活它（讀取 javascript）。使用下面的腳本來啓用頁面中的所有的彈出框（popover）：

$(function () { $("[data-toggle='popover']").popover(); });

 

7.1通過 data 屬性：

如需添加一個彈出框（popover），只需向一個錨/按鈕標籤添加 data-toggle="popover"即可。錨的 title 即爲彈出框（popover）的文本。默認情況下，插件把彈出框（popover）設置在頂部。

<a href="#" data-toggle="popover" title="Example popover">

請懸停在我的上面</a>

 

通過 JavaScript：

通過 JavaScript 啓用彈出框（popover）：

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

 

7.2選項

有一些選項是通過 Bootstrap 數據 API（Bootstrap Data API）添加或通過 JavaScript 調用的。下表列出了這些選項：

選項名稱	類型/默認值	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'

 

7.3方法

下面是一些彈出框（Popover）插件中有用的方法：

方法	描述	實例
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')

 

7.4事件

下表列出了彈出框（Popover）插件中要用到的事件。這些事件可在函數中當鉤子使用。

事件	描述	實例
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 () {   // 執行一些動作...})

 

8.警告框（Alert）插件

8.1通過 data 屬性：

通過數據 API（Data API）添加可取消功能，只需要向關閉按鈕添加 data-dismiss="alert"，就會自動爲警告框添加關閉功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">

&times;</a>

 

通過 JavaScript：通過 JavaScript 添加可取消功能：

$(".alert").alert()

 

8.2方法

下面是一些警告框（Alert）插件中有用的方法：

方法	描述	實例
.alert()	該方法讓所有的警告框都帶有關閉功能。	$('#identifier').alert();
Close Method.alert('close')	關閉所有的警告框。	$('#identifier').alert('close');

 

8.3事件

下表列出了警告框（Alert）插件中要用到的事件。這些事件可在函數中當鉤子使用。

事件	描述	實例
close.bs.alert	當調用 close 實例方法時立即觸發該事件。	$('#myalert').bind('close.bs.alert', function () {   // 執行一些動作...})
closed.bs.alert	當警告框被關閉時觸發該事件 （將等待 CSS 過渡效果完成）。	$('#myalert').bind('closed.bs.alert', function () { // 執行一些動作...})

 

9.按鈕

9.1加載狀態

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加載狀態

</button>

<script>

    $(function() {

        $(".btn").click(function(){

            $(this).button('loading').delay(1000).queue(function() {

               $(this).button('reset');

               $(this).dequeue();

            });

        });

    });  

</script>

 

9.2單個切換

如需激活單個按鈕的切換（即改變按鈕的正常狀態爲按壓狀態，反之亦然），只需向 button 元素添加 data-toggle="button" 作爲其屬性即可，如下面實例所示：

<button type="button" class="btn btn-primary" data-toggle="button"> 單個切換 </button>

 

9.3複選框

您可以創建複選框組，並通過向 btn-group 添加 data 屬性 data-toggle="buttons" 來添加複選框組的切換。

實例

<div class="btn-group" data-toggle="buttons">

   <label class="btn btn-primary"> <input type="checkbox"> 選項 1 </label>

   <label class="btn btn-primary"> <input type="checkbox"> 選項 2 </label>

   <label class="btn btn-primary"> <input type="checkbox"> 選項 3 </label>

 </div>

 

9.4單選按鈕

您可以創建單選按鈕組，並通過向 btn-group 添加 data 屬性 data-toggle="buttons" 來添加單選按鈕組的切換。

實例

<div class="btn-group" data-toggle="buttons">

<label class="btn btn-primary"><input type="radio" name="options" id="option1">1 </label>

<label class="btn btn-primary"><input type="radio" name="options" id="option2">2 </label>

<label class="btn btn-primary"><input type="radio" name="options" id="option3">3 </label>

 </div>

 

9.5方法

下面是一些按鈕（Button）插件中有用的方法：

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

 

10.摺疊（Collapse）插件

10.1通過 data 屬性：

向元素添加 data-toggle="collapse" 和 data-target，自動分配可摺疊元素的控制。data-target 屬性接受一個 CSS 選擇器，並會對其應用摺疊效果。

請確保向可摺疊元素添加 class .collapse。如果您希望它默認情況下是打開的，請添加額外的 class .in。

爲了向可摺疊控件添加類似摺疊面板的分組管理，請添加 data 屬性 data-parent="#selector"。

 

通過 JavaScript：可通過 JavaScript 激活 collapse 方法，如下所示：

$('.collapse').collapse()

 

10.2創建可摺疊的分組或摺疊面板（accordion）

<div class="panel-group" id="accordion">

    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

                點擊我進行展開，再次點擊我進行摺疊。第 1 部分

                </a>

            </h4>

        </div>

        <div id="collapseOne" class="panel-collapse collapse in">

            <div class="panel-body">

                Nihil anim keffiyeh helvetica, craft beer labore wes anderson

                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

                vice lomo.

            </div>

        </div>

</div>

<div class="panel panel-default"></div>......

</div>

 

10.2創建不帶data-parent的簡單的可摺疊組件（collapsible），如下所示：

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">

    簡單的可摺疊組件

</button>    

<div id="demo" class="collapse in">

    Nihil anim keffiyeh helvetica, craft beer labore wes anderson

    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

    vice lomo.

</div>

 

10.3下表列出了摺疊（Collapse）插件用於處理繁重的伸縮的 class：

Class	描述
.collapse	隱藏內容。
.collapse.in	顯示內容。
.collapsing	當過渡效果開始時被添加，當過渡效果完成時被移除。

 

10.4選項

有一些選項是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

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

 

10.5方法

下面是一些摺疊（Collapse）插件中有用的方法：

方法	描述	實例
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')

 

10.6事件

下表列出了摺疊（Collapse）插件中要用到的事件。這些事件可在函數中當鉤子使用。

事件	描述	實例
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 () { // 執行一些動作...})

 

11.輪播（Carousel）插件

實例

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- 輪播（Carousel）指標 -->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>   

    <!-- 輪播（Carousel）項目 -->

    <div class="carousel-inner">

        <div class="item active">

            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

        </div>

        <div class="item">

            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

        </div>

        <div class="item">

            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">

        </div>

    </div>

    <!-- 輪播（Carousel）導航 -->

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a>

</div>

 

11.1通過 data 屬性：

使用 data 屬性可以很容易控制輪播（Carousel）的位置。

屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。

使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數。

data-ride="carousel" 屬性用於標記輪播在頁面加載時就開始動畫播放。

通過 JavaScript：輪播（Carousel）可通過 JavaScript 手動調用，如下所示：

$('.carousel').carousel()

 

11.2選項

有一些選項是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

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

 

11.3方法

下面是一些輪播（Carousel）插件中有用的方法：

方法	描述	實例
.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')

 

11.4事件

下表列出了輪播（Carousel）插件中要用到的事件。這些事件可在函數中當鉤子使用。

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

 

12.附加導航（Affix）插件

附加導航（Affix）插件允許某個 <div> 固定在頁面的某個位置。

12.1通過 data 屬性：

如需向元素添加附加導航（Affix）行爲，只需要向需要監聽的元素添加 data-spy="affix"即可。

通過 JavaScript：您可以通過 JavaScript 手動爲某個元素添加附加導航（Affix），如下所示：

$('#myAffix').affix({

   offset: {

 top: 100, bottom: function () {

return (this.bottom =

$('.bs-footer').outerHeight(true))

}

}})

 

12.2使用附加導航（Affix）插件，您都必須通過 CSS 定位內容。

附加導航（Affix）插件在三種 class 之間切換，每種 class 都呈現了特定的狀態： .affix、.affix-top 和 .affix-bottom。

請按照下面的步驟，來爲這三種狀態設置您自己的 CSS（不依賴此插件）。

①在開始時，插件自己添加 .affix-top 來指示元素在它的最頂端位置。這個時候不需要任何的 CSS 定位。

②當滾動經過添加了附加導航（Affix）的元素時，應觸發實際的附加導航（Affix）。此時 .affix 會替代 .affix-top，同時設置 position: fixed;（由 Bootstrap 的 CSS 代碼提供，可以自己重置：

ul.nav-tabs.affix{

    top: 300px; /* Set the top position of pinned element */

}）。

③如果定義了底部偏移，當滾動到達該位置時，應把 .affix 替換爲 .affix-bottom。由於偏移是可選的，假如設置了該偏移，則要求同時設置適當的 CSS。在這種情況下，請在必要的時候添加 position: absolute;。

 

12.3選項

有一些選項是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

選項名稱	類型/默認值	Data 屬性名稱	描述
offset	number | function | object 默認值：10	data-offset	當計算滾動位置時，距離頂部的偏移像素。如果設置了一個數字，則該偏移量的值將被應用在頂部和底部。如果設置了一個對象偏移，則其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要動態計算偏移，請使用函數。