Bootstrap 插件（二）
1.Bootstrap 下拉菜單（Dropdown）插件
Bootstrap 下拉菜單 這一章講解了下拉菜單，但是沒有涉及到交互部分，本章將具體講解下拉菜單的交互。使用下拉菜單（Dropdown）插件，您可以向任何組件（比如導航欄、標簽頁、膠囊式導航菜單、按鈕等）添加下拉菜單
1.1用法
通過 data 屬性：向鏈接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單，如下所示：
<div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜單（Dropdown）觸發器</a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li>step1</li> <li>step2</li> </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"> <li>step1</li> <li>step2</li> </ul> </div>
通過 JavaScript：通過 JavaScript 調用下拉菜單切換，請使用下面的方法（控制下拉列表是否顯示）：
$(‘.dropdown-toggle‘).dropdown()
2.Bootstrap 滾動監聽（Scrollspy）插件
滾動監聽（Scrollspy）插件，即自動更新導航插件，會根據滾動條的位置自動更新對應的導航目標。其基本的實現是隨著您的滾動，基於滾動條的位置向導航欄添加 .active class。
2.1用法
通過 data 屬性：向您想要監聽的元素（通常是 body）添加 data-spy="scroll"。然後添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。為了它能正常工作，您必須確保頁面主體中有匹配您所要監聽鏈接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ... </body>
通過 JavaScript：您可以通過 JavaScript 調用滾動監聽，選取要監聽的元素，然後調用 .scrollspy() 函數：
$(‘body‘).scrollspy({ target: ‘.navbar-example‘ })
3.Bootstrap 標簽頁（Tab）插件
3.1用法
通過 data 屬性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。
添加 nav 和 nav-tabs 類到 ul 中，將會應用 Bootstrap 標簽樣式，添加 nav 和 nav-pills 類到 ul 中，將會應用 Bootstrap 膠囊式樣式。
<ul class="nav nav-tabs"> <li><a href="#identifier" data-toggle="tab">Home</a></li> ... </ul>
通過 JavaScript：您可以使用 Javscript 來啟用標簽頁，如下所示：
$(‘#myTab a‘).click(function (e) {
e.preventDefault()
$(this).tab(‘show‘)
})
實例：
// 通過名稱選取標簽頁
$(‘#myTab a[href="#profile"]‘).tab(‘show‘)
// 選取第一個標簽頁
$(‘#myTab a:first‘).tab(‘show‘)
// 選取最後一個標簽頁
$(‘#myTab a:last‘).tab(‘show‘)
// 選取第三個標簽頁（從 0 開始索引）
$(‘#myTab li:eq(2) a‘).tab(‘show‘)
3.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>
4.Bootstrap 提示工具（Tooltip）插件
通過 data 屬性：如需添加一個提示工具（tooltip），只需向一個錨標簽添加 data-toggle="tooltip" 即可。錨的 title 即為提示工具（tooltip）的文本。默認情況下，插件把提示工具（tooltip）設置在頂部。
<a href="#" data-toggle="tooltip" title="Example tooltip">請懸停在我的上面</a>
通過 JavaScript：通過 JavaScript 觸發提示工具（tooltip）：
$(‘#identifier‘).tooltip(options)
Bootstrap 插件（二）