Bootstrap插件全集

更新時(shí)間：2016年07月18日 09:57:21 作者：qq_27626333

這篇文章主要為大家詳細(xì)介紹了Bootstrap插件，包括Bootstrap過(guò)渡效果插件、Bootstrap下拉菜單插件等，感興趣的小伙伴們可以參考一下

Bootstrap 插件

1、Bootstrap 過(guò)渡效果（Transition）插件

過(guò)渡效果（Transition）插件提供了簡(jiǎn)單的過(guò)渡效果。如果您想要單獨(dú)引用該插件的功能，那么除了其他的 JS 文件，您還需要引用 transition.js。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

Transition.js 是 transitionEnd 事件和 CSS 過(guò)渡效果模擬器的基本幫助器類。它被其他插件用來(lái)檢查 CSS 過(guò)渡效果支持，并用來(lái)獲取過(guò)渡效果。

使用案例

過(guò)渡效果（Transition）插件的使用案例：

（1）、具有幻燈片或淡入效果的模態(tài)對(duì)話框。具體實(shí)例參見(jiàn) Bootstrap 模態(tài)框（Modal）插件。

（2）、具有淡出效果的標(biāo)簽頁(yè)。具體實(shí)例參見(jiàn) Bootstrap 標(biāo)簽頁(yè)（Tab）插件。

（3）、具有淡出效果的警告框。具體實(shí)例參見(jiàn) Bootstrap 警告框（Alert）插件。

（4）、具有幻燈片效果的輪播板。具體實(shí)例參見(jiàn) Bootstrap 輪播（Carousel）插件。

2、Bootstrap 模態(tài)框（Modal）插件

模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來(lái)自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開(kāi)父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 modal.js?；蛘撸?Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

（1）、用法

您可以切換模態(tài)框（Modal）插件的隱藏內(nèi)容：

A、通過(guò) data 屬性：在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性 data-toggle="modal"，同時(shí)設(shè)置 data-target="#identifier" 或 href="#identifier" 來(lái)指定要切換的特定的模態(tài)框（帶有 id="identifier"）。

B、通過(guò) JavaScript：使用這種技術(shù)，您可以通過(guò)簡(jiǎn)單的一行 JavaScript 來(lái)調(diào)用帶有 id="identifier" 的模態(tài)框：

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

<h2>創(chuàng)建模態(tài)框（Modal）</h2>

<!-- 按鈕觸發(fā)模態(tài)框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" 

 data-target="#myModal">

 開(kāi)始演示模態(tài)框

</button>

<!-- 模態(tài)框（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">

  ×

 </button>

 <h4 class="modal-title" id="myModalLabel">

 模態(tài)框（Modal）標(biāo)題

 </h4>

 </div>

 <div class="modal-body">

 在這里添加一些文本

 </div>

 <div class="modal-footer">

 <button type="button" class="btn btn-default"

 data-dismiss="modal">關(guān)閉

 </button>

 <button type="button" class="btn btn-primary">

 提交更改

 </button>

 </div>

 </div><!-- /.modal-content -->

</div><!-- /.modal -->

</div>

代碼講解：

A、使用模態(tài)窗口，您需要有某種觸發(fā)器。您可以使用按鈕或鏈接。這里我們使用的是按鈕。

B、如果您仔細(xì)查看上面的代碼，您會(huì)發(fā)現(xiàn)在 <button> 標(biāo)簽中，data-target="#myModal" 是您想要在頁(yè)面上加載的模態(tài)框的目標(biāo)。您可以在頁(yè)面上創(chuàng)建多個(gè)模態(tài)框，然后為每個(gè)模態(tài)框創(chuàng)建不同的觸發(fā)器?，F(xiàn)在，很明顯，您不能在同一時(shí)間加載多個(gè)模塊，但您可以在頁(yè)面上創(chuàng)建多個(gè)在不同時(shí)間進(jìn)行加載。

C、在模態(tài)框中需要注意兩點(diǎn)：

第一是 .modal，用來(lái)把 <div> 的內(nèi)容識(shí)別為模態(tài)框。

第二是 .fade class。當(dāng)模態(tài)框被切換時(shí)，它會(huì)引起內(nèi)容淡入淡出。

D、aria-labelledby="myModalLabel"，該屬性引用模態(tài)框的標(biāo)題。

E、屬性 aria-hidden="true" 用于保持模態(tài)窗口不可見(jiàn)，直到觸發(fā)器被觸發(fā)為止（比如點(diǎn)擊在相關(guān)的按鈕上）。

F、<div class="modal-header">，modal-header 是為模態(tài)窗口的頭部定義樣式的類。

G、class="close"，close 是一個(gè) CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。

H、data-dismiss="modal"，是一個(gè)自定義的 HTML5 data 屬性。在這里它被用于關(guān)閉模態(tài)窗口。

I、class="modal-body"，是 Bootstrap CSS 的一個(gè) CSS class，用于為模態(tài)窗口的主體設(shè)置樣式。

J、class="modal-footer"，是 Bootstrap CSS 的一個(gè) CSS class，用于為模態(tài)窗口的底部設(shè)置樣式。

K、data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開(kāi)模態(tài)窗口。

（2）、選項(xiàng)

有一些選項(xiàng)可以用來(lái)定制模態(tài)窗口（Modal Window）的外觀和感觀，它們是通過(guò) data 屬性或 JavaScript 來(lái)傳遞的。下表列出了這些選項(xiàng)：

（3）、方法

下面是一些可與 modal() 一起使用的有用的方法。

（4）、事件

下表列出了模態(tài)框中要用到事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

3、Bootstrap 下拉菜單（Dropdown）插件

Bootstrap 下拉菜單這一章講解了下拉菜單，但是沒(méi)有涉及到交互部分，本章將具體講解下拉菜單的交互。使用下拉菜單（Dropdown）插件，您可以向任何組件（比如導(dǎo)航欄、標(biāo)簽頁(yè)、膠囊式導(dǎo)航菜單、按鈕等）添加下拉菜單。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 dropdown.js?；蛘撸?Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

（1）、用法

您可以切換下拉菜單（Dropdown）插件的隱藏內(nèi)容：

通過(guò) data 屬性：向鏈接或按鈕添加 data-toggle="dropdown" 來(lái)切換下拉菜單，

A、通過(guò) data 屬性：向鏈接或按鈕添加 data-toggle="dropdown" 來(lái)切換下拉菜單，如下所示：

<div class="dropdown">

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

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

 </ul>

</div>

B、如果您需要保持鏈接完整（在瀏覽器不啟用 JavaScript 時(shí)有用），請(qǐng)使用 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>

C、通過(guò) JavaScript：通過(guò) JavaScript 調(diào)用下拉菜單切換，請(qǐng)使用下面的方法：$('.dropdown-toggle').dropdown()

（2）、方法

下拉菜單切換有一個(gè)簡(jiǎn)單的方法用來(lái)顯示或隱藏下拉菜單。$().dropdown('toggle')

4、Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件

滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著您的滾動(dòng)，基于滾動(dòng)條的位置向?qū)Ш綑谔砑?.active class。

（1）、用法

您可以向頂部導(dǎo)航添加滾動(dòng)監(jiān)聽(tīng)行為：

A、通過(guò) data 屬性：向您想要監(jiān)聽(tīng)的元素（通常是 body）添加 data-spy="scroll"。然后添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。為了它能正常工作，您必須確保頁(yè)面主體中有匹配您所要監(jiān)聽(tīng)鏈接的 ID 的元素存在。

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

 ...

 <div class="navbar-example">

 <ul class="nav nav-tabs">

 ...

 </ul>

 </div>

 ...

</body>

B、通過(guò) JavaScript：您可以通過(guò) JavaScript 調(diào)用滾動(dòng)監(jiān)聽(tīng)，選取要監(jiān)聽(tīng)的元素，然后調(diào)用 .scrollspy() 函數(shù)：

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

（2）、選項(xiàng)

通過(guò) data 屬性或 JavaScript 來(lái)傳遞。下表列出了這些選項(xiàng)：

（3）、方法

.scrollspy('refresh')：當(dāng)通過(guò) JavaScript 調(diào)用 scrollspy 方法時(shí)，您需要調(diào)用 .refresh 方法來(lái)更新 DOM。這在 DOM 的任意元素發(fā)生變更（即，您添加或移除了某些元素）時(shí)非常有用。下面是使用該方法的語(yǔ)法。

$('[data-spy="scroll"]').each(function () {

 var $spy = $(this).scrollspy('refresh')

})

（4）、事件

下表列出了滾動(dòng)監(jiān)聽(tīng)中要用到事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

5、Bootstrap 標(biāo)簽頁(yè)（Tab）插件

標(biāo)簽頁(yè)（Tab）在 Bootstrap 導(dǎo)航元素一章中介紹過(guò)。通過(guò)結(jié)合一些 data 屬性，您可以輕松地創(chuàng)建一個(gè)標(biāo)簽頁(yè)界面。通過(guò)這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中。

（1）、用法

您可以通過(guò)以下兩種方式啟用標(biāo)簽頁(yè)：

A、通過(guò) data 屬性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。添加 nav 和 nav-tabs 類到 ul 中，將會(huì)應(yīng)用 Bootstrap 標(biāo)簽樣式，添加 nav 和 nav-pills 類到 ul 中，將會(huì)應(yīng)用 Bootstrap 膠囊式樣式。

...

</ul>

B、通過(guò) JavaScript：您可以使用 Javscript 來(lái)啟用標(biāo)簽頁(yè)，如下所示：

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

 e.preventDefault()

 $(this).tab('show')

})

下面的實(shí)例演示了以不同的方式來(lái)激活各個(gè)標(biāo)簽頁(yè)：

// 通過(guò)名稱選取標(biāo)簽頁(yè)

$('#myTab a[href="#profile"]').tab('show')

// 選取第一個(gè)標(biāo)簽頁(yè)

$('#myTab a:first').tab('show')

// 選取最后一個(gè)標(biāo)簽頁(yè)

$('#myTab a:last').tab('show')

// 選取第三個(gè)標(biāo)簽頁(yè)（從 0 開(kāi)始索引）

$('#myTab li:eq(2) a').tab('show')

（2）、淡入淡出效果

如果需要為標(biāo)簽頁(yè)設(shè)置淡入淡出效果，請(qǐng)?zhí)砑?.fade 到每個(gè) .tab-pane 后面。第一個(gè)標(biāo)簽頁(yè)必須添加 .in 類，以便淡入顯示初始內(nèi)容，如下面實(shí)例所示：

<div class="tab-content">

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

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

</div>

（3）、方法

.$().tab：該方法可以激活標(biāo)簽頁(yè)元素和內(nèi)容容器。標(biāo)簽頁(yè)需要用一個(gè) data-target 或者一個(gè)指向 DOM 中容器節(jié)點(diǎn)的 href。

<ul class="nav nav-tabs" id="myTab">

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

 .....

</ul>

<div class="tab-content">

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

 .....

</div>

<script>

 $(function () {

 $('#myTab a:last').tab('show')

 })

</script>

（4）、事件

下表列出了標(biāo)簽頁(yè)（Tab）插件中要用到的事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

6、Bootstrap 提示工具（Tooltip）插件

當(dāng)您想要描述一個(gè)鏈接的時(shí)候，提示工具（Tooltip）就顯得非常有用。提示工具（Tooltip）插件是受 Jason Frame 寫的 jQuery.tipsy 的啟發(fā)。提示工具（Tooltip）插件做了很多改進(jìn)，例如不需要依賴圖像，而是改用 CSS 實(shí)現(xiàn)動(dòng)畫效果，用 data 屬性存儲(chǔ)標(biāo)題信息。

（1）、用法

提示工具（Tooltip）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把提示工具（tooltip）放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加提示工具（tooltip）：

A、通過(guò) data 屬性：如需添加一個(gè)提示工具（tooltip），只需向一個(gè)錨標(biāo)簽添加 data-toggle="tooltip" 即可。錨的 title 即為提示工具（tooltip）的文本。默認(rèn)情況下，插件把提示工具（tooltip）設(shè)置在頂部。

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

A、通過(guò) JavaScript：通過(guò) JavaScript 觸發(fā)提示工具（tooltip）：$('#identifier').tooltip(options)

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

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

<a href="#" class="tooltip-test"data-toggle="tooltip" 

 data-placement="left" title="左側(cè)的 Tooltip">

 左側(cè)的 Tooltip

</a>.

 <a href="#" data-toggle="tooltip" data-placement="top"

 title="頂部的 Tooltip">

 頂部的 Tooltip

</a>.

<button type="button" class="btn btn-default"data-toggle="tooltip" 

 data-placement="bottom"title="底部的 Tooltip">

 底部的 Tooltip

</button>

（2）、選項(xiàng)

有一些選項(xiàng)是通過(guò) Bootstrap 數(shù)據(jù) API（Bootstrap Data API）添加或通過(guò) JavaScript 調(diào)用的。下表列出了這些選項(xiàng)：

（3）、方法

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

（4）、事件

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

7、Bootstrap 彈出框（Popover）插件

彈出框（Popover）與工具提示（Tooltip）類似，提供了一個(gè)擴(kuò)展的視圖。如需激活彈出框，用戶只需把鼠標(biāo)懸停在元素上即可。彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）來(lái)填充。該方法依賴于工具提示（tooltip）。如果您想要單獨(dú)引用該插件的功能，那么您需要引用 popover.js，它依賴于工具提示（Tooltip）插件。

（1）、用法

彈出框（Popover）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把彈出框（popover）放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加彈出框（popover）：

A、通過(guò) data 屬性：如需添加一個(gè)彈出框（popover），只需向一個(gè)錨/按鈕標(biāo)簽添加 data-toggle="popover" 即可。錨的 title 即為彈出框（popover）的文本。默認(rèn)情況下，插件把彈出框（popover）設(shè)置在頂部。

請(qǐng)懸停在我的上面

</a>

B、通過(guò) JavaScript：通過(guò) JavaScript 啟用彈出框（popover）： $('#identifier').popover(options)

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

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

<button type="button" class="btn btn-default" title="Popover title"

data-container="body" data-toggle="popover" data-placement="left" data-content="左側(cè)的 Popover 中的一些內(nèi)容">左側(cè)的 Popover

</button>

（2）、選項(xiàng)

有一些選項(xiàng)是通過(guò) Bootstrap 數(shù)據(jù) API（Bootstrap Data API）添加或通過(guò) JavaScript 調(diào)用的。下表列出了這些選項(xiàng)：

（3）、方法

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

（4）、事件

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

8、Bootstrap 警告框（Alert）插件

警告框（Alert）消息大多是用來(lái)想終端用戶顯示諸如警告或確認(rèn)消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。

（1）、用法

您可以有以下兩種方式啟用警告框的可取消（dismissal）功能：

A、通過(guò) data 屬性：通過(guò)數(shù)據(jù) API（Data API）添加可取消功能，只需要向關(guān)閉按鈕添加 data-dismiss="alert"，就會(huì)自動(dòng)為警告框添加關(guān)閉功能。

</a>

B、通過(guò) JavaScript：通過(guò) JavaScript 添加可取消功能：$(".alert").alert()

<div class="alert alert-warning">

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

 ×

 </a>

 <strong>警告！</strong>您的網(wǎng)絡(luò)連接有問(wèn)題。

</div>

（2）、方法

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

（3）、事件

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

9、Bootstrap 按鈕（Button）插件

通過(guò)按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組。

（1）、加載狀態(tài)

如需向按鈕添加加載狀態(tài)，只需要簡(jiǎn)單地向 button 元素添加 data-loading-text="Loading..." 作為其屬性即可，

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

</button>

<script> $(function() {

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

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

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

 });

}); 

</script>

（2）、單個(gè)切換

如需激活單個(gè)按鈕的切換（即改變按鈕的正常狀態(tài)為按壓狀態(tài)，反之亦然），只需向 button 元素添加 data-toggle="button" 作為其屬性即可。

<button type="button" class="btn btn-primary"

 data-toggle="button"> 單個(gè)切換

</button>

（3）、復(fù)選框（Checkbox）

您可以創(chuàng)建復(fù)選框組，并通過(guò)向 btn-group 添加 data 屬性 data-toggle="buttons" 來(lái)添加復(fù)選框組的切換。

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

 <label class="btn btn-primary"><input type="checkbox"> 選項(xiàng) 1

 </label>

 <label class="btn btn-primary"><input type="checkbox"> 選項(xiàng) 3

 </label>

</div>

（4）、單選按鈕（Radio）

類似地，您可以創(chuàng)建單選按鈕組，并通過(guò)向 btn-group 添加 data 屬性 data-toggle="buttons" 來(lái)添加單選按鈕組的切換。

（5）、方法

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

10、Bootstrap 折疊（Collapse）插件

折疊（Collapse）插件可以很容易地讓頁(yè)面區(qū)域折疊起來(lái)。無(wú)論您用它來(lái)創(chuàng)建折疊導(dǎo)航還是內(nèi)容面板，它都允許很多內(nèi)容選項(xiàng)。

（1）、創(chuàng)建可折疊的分組或折疊面板（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">

 點(diǎn)擊我進(jìn)行展開(kāi)，再次點(diǎn)擊我進(jìn)行折疊。第 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>

A、data-toggle="collapse" 添加到您想要展開(kāi)或折疊的組件的鏈接上。

B、href 或 data-target 屬性添加到父組件，它的值是子組件的 id。

C、data-parent 屬性把折疊面板（accordion）的 id 添加到要展開(kāi)或折疊的組件的鏈接上

（2）、創(chuàng)建不帶 accordion 標(biāo)記的簡(jiǎn)單的可折疊組件（collapsible），如下所示：

<button type="button" class="btn btn-primary"data-toggle="collapse" 

 data-target="#demo">

 簡(jiǎn)單的可折疊組件

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

（3）、用法

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

您可以通過(guò)以下兩種方式使用折疊（Collapse）插件：

A、通過(guò) data 屬性：向元素添加 data-toggle="collapse" 和 data-target，自動(dòng)分配可折疊元素的控制。data-target 屬性接受一個(gè) CSS 選擇器，并會(huì)對(duì)其應(yīng)用折疊效果。請(qǐng)確保向可折疊元素添加 class .collapse。如果您希望它默認(rèn)情況下是打開(kāi)的，請(qǐng)?zhí)砑宇~外的 class .in。

為了向可折疊控件添加類似折疊面板的分組管理，請(qǐng)?zhí)砑?data 屬性 data-parent="#selector"。

B、通過(guò) JavaScript：可通過(guò) JavaScript 激活 collapse 方法，如下所示：$('.collapse').collapse()

11、Bootstrap 輪播（Carousel）插件

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。

<div id="myCarousel" class="carousel slide">

 <!-- 輪播（Carousel）指標(biāo) -->

 <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）項(xiàng)目 -->

 <div class="carousel-inner">

 <div class="item active">

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

 <div class="carousel-caption">標(biāo)題 1</div> </div>

 <div class="item">

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

 <div class="carousel-caption">標(biāo)題 2</div></div>

 <div class="item">

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

 <div class="carousel-caption">標(biāo)題 3</div>

 </div></div>

 <!-- 輪播（Carousel）導(dǎo)航 -->

 <a class="carousel-control left" href="#myCarousel"

 data-slide="prev">‹</a>

 <a class="carousel-control right" href="#myCarousel"

 data-slide="next">›</a>

</div>

（1）、用法

A、通過(guò) data 屬性：使用 data 屬性可以很容易控制輪播（Carousel）的位置。

屬性 data-slide 接受關(guān)鍵字 prev 或 next，用來(lái)改變幻燈片相對(duì)于當(dāng)前位置的位置。

使用 data-slide-to 來(lái)向輪播床底一個(gè)原始滑動(dòng)索引，data-slide-to="2" 將把滑塊移動(dòng)到一個(gè)特定的索引，索引從 0 開(kāi)始計(jì)數(shù)。

data-ride="carousel" 屬性用于標(biāo)記輪播在頁(yè)面加載時(shí)就開(kāi)始動(dòng)畫播放。

B、通過(guò) JavaScript：輪播（Carousel）可通過(guò) JavaScript 手動(dòng)調(diào)用，如下所示：$('.carousel').carousel()

（2）、選項(xiàng)

有一些選項(xiàng)是通過(guò) data 屬性或 JavaScript 來(lái)傳遞的。下表列出了這些選項(xiàng)：

（3）、方法

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

（4）、事件

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

12、Bootstrap 附加導(dǎo)航（Affix）插件

附加導(dǎo)航（Affix）插件允許某個(gè) <div> 固定在頁(yè)面的某個(gè)位置。您也可以在打開(kāi)或關(guān)閉使用該插件之間進(jìn)行切換。一個(gè)常見(jiàn)的例子是社交圖標(biāo)。它們將在某個(gè)位置開(kāi)始，但當(dāng)頁(yè)面點(diǎn)擊某個(gè)標(biāo)記，該 <div> 會(huì)鎖定在某個(gè)位置，不會(huì)隨著頁(yè)面其他部分一起滾動(dòng)。

（1）、用法

您可以通過(guò) data 屬性或者通過(guò) JavaScript 來(lái)使用附加導(dǎo)航（Affix）插件。

通過(guò) data 屬性：如需向元素添加附加導(dǎo)航（Affix）行為，只需要向需要監(jiān)聽(tīng)的元素添加 data-spy="affix" 即可。請(qǐng)使用偏移來(lái)定義何時(shí)切換元素的鎖定和移動(dòng)。

（2）、通過(guò) JavaScript：您可以通過(guò) JavaScript 手動(dòng)為某個(gè)元素添加附加導(dǎo)航（Affix），如下所示：

$('#myAffix').affix({

 offset: {

 top: 100, bottom: function () {

 return (this.bottom =

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

 }

 }

})

（3）、通過(guò) CSS 定位

在上面兩種使用附加導(dǎo)航（Affix）插件的方式中，您都必須通過(guò) CSS 定位內(nèi)容。附加導(dǎo)航（Affix）插件在三種 class 之間切換，每種 class 都呈現(xiàn)了特定的狀態(tài)： .affix、.affix-top 和 .affix-bottom。請(qǐng)按照下面的步驟，來(lái)為這三種狀態(tài)設(shè)置您自己的 CSS（不依賴此插件）。

A、在開(kāi)始時(shí)，插件添加 .affix-top 來(lái)指示元素在它的最頂端位置。這個(gè)時(shí)候不需要任何的 CSS 定位。

B、當(dāng)滾動(dòng)經(jīng)過(guò)添加了附加導(dǎo)航（Affix）的元素時(shí)，應(yīng)觸發(fā)實(shí)際的附加導(dǎo)航（Affix）。此時(shí) .affix 會(huì)替代 .affix-top，同時(shí)設(shè)置 position: fixed;（由 Bootstrap 的 CSS 代碼提供）。

C、如果定義了底部偏移，當(dāng)滾動(dòng)到達(dá)該位置時(shí)，應(yīng)把 .affix 替換為 .affix-bottom。由于偏移是可選的，假如設(shè)置了該偏移，則要求同時(shí)設(shè)置適當(dāng)?shù)?CSS。在這種情況下，請(qǐng)?jiān)诒匾臅r(shí)候添加 position: absolute;。

（4）、選項(xiàng)

有一些選項(xiàng)是通過(guò) data 屬性或 JavaScript 來(lái)傳遞的。下表列出了這些選項(xiàng)：