<li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li>
</ul>
</div>
div .dropdownの事件
show.bs.dropdown //在 show 方法調用時立即觸發。
shown.bs.dropdown //在下拉菜單完全顯示出來，并且等CSS動畫完成之後觸發。
hide.bs.dropdown //在 hide 方法調用時，但還未關閉隱藏時觸發。
hidden.bs.dropdown //在下拉菜單完全隱藏之後，并且等CSS動畫完成之後觸發。
24、滾動監聽
滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目，顯示导航项目高亮顯示。
<div data-offset="0" data-target="#nav" data-spy="scroll"><h4 id=’a’></h4><p></p></div>
data-spy="scroll" //滾動監聽
data-target=’#nav’ //監聽對象，指向一個navbar或者dropdown
data-offset="0" //默认值为 10，内容距滾動容器10像素以内，高亮所有對應的菜單。
外部navbarのdropdown
需要中間添加<a href=”#a”></a>
監聽事件：
activate.bs.scrollspy //每當一個新條目被激活後都將由滾動監聽插件觸發此事件。
function removeSec(e) {
$(e).parents(\'.sec\').remove(); //刪除
$(\'#content\').scrollspy(\'refresh\'); //更新DOM(更新#content)
}
25、標籤頁
<ul class=’nav nav-tabs’>
<li><a href=’#h5” data-toggle=’tab’>h5</a></li>
</ul>
<div class=’tab-content’ style=’padding:10px;’>
<div class=’tab-pane fade in active’ active id=”h5”></div>
</div>
備註：fade : 淡入淡出；in : 默認顯示
JS中用tab：
$(\'#nav a\').on(\'click\', function (e) {
e.preventDefault();
$(this).tab(\'show\');
});
tab事件：
show.bs.tab //在調用 tab 方法時觸發
shown.bs.tab //在顯示整個標籤時觸發
26、工具提示：工具提示就是通过鼠标移动选定在特定的元素上時，顯示相关的提示语。
<a href="#" data-toggle="tooltip" title="超文本标识符"
data-animation="false" //是否允許fade動畫
data-html="true" //是否可設置帶HTML格式的提示<含標籤>
data-placement="auto" //顯示方位有top、left、right、bottom，top為默認
data-selector="a[rel=tooltip]" //綁定的選擇器
data-trigger="click" //如何觸發。有click、hover、focus、manual
data-delay="500" //延時時間
data-template="<b>123</b>" //提示內容
data-container=’body’ //附著到的容器
>HTML5</a>
JavaScript 方式
$(\'#section a\').tooltip({
delay : {
show : 500,
hide : 100,
},
container : \'body\'
});
JavaScript 有四個方法：show、hide、toggle 和 destroy 。
JS四個事件：
show.bs.tooltip //在 show 方法調用時立即触發
shown.bs.tooltip //在提示框完全顯示給用户之後触發
hide.bs.tooltip //在 hide 方法調用時立即触發
hidden.bs.tooltip //在提示框完全隐藏之後触發
27、彈出框
<button type="button" title="弹出框"
data-animation=’true’ //是否允許fade動畫
data-toggle="popover" //對象類型
data-html=’false’ //是否允許HTML形式的內容
data-placement=’auto’ //顯示方位
data-selector=’false’ //選擇綁定的選擇器，不選時用false
data-original-title=’這是標題’ //彈出框的標題，優先級比title低
data-content="这是个弹出框插件" //彈出框內容
data-trigger=’click’ //觸發事件類型，hover、focus、manual
data-delay=’300’ //彈出延時
data-container=’false’ //不綁定容器
data-template=’’ //提示框模板
data-viewport=’’ //設置外圍容器的邊際
>
点击弹出/隐藏弹出框
</button>
事件：show.bs.popover、shown.bs.popover、hide.bs.popover、hidden.bs.popover
方法：show、hide、toggle、destroy[用法：$(‘#c’).popover(destroy)]
28、警告框
<div>
<button type="button" data-dismiss="alert"><span>×</span></button>
<p>警告：您的浏览器不支持！</p>
</div>
事件：
close.bs.alert //当 close 方法被调用後立即觸發
closed.bs.alert //当警告框被完全关闭後立即触
方法：close[用法：$(‘#cl’).alert(close)]
29、按鈕
<div data-toggle="buttons">
<label for="">
<input type="radio" autocomplete="off" checked> 男
</label>
<label for="">
<input type="radio" autocomplete="off"> 女
</label>
</div>
.btn-group 會讓兩個元素無縫連接
.buttons 會去掉 radioの點
.btn 會讓label變成一個整體，不帶radio點
<button type="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
加载状态</button>
$(\'#myButton\').on(\'click\', function () {
var btn = $(this).button(\'loading\');
setTimeout(function () {
btn.button(\'reset\'); //還可是btn.button(‘toggle’)
}, 1000);
});