知識(shí)點(diǎn)：
1痢艺、下拉菜單插件
2仓洼、滾動(dòng)監(jiān)聽插件
3、按鈕插件
4堤舒、折疊插件
1色建、下拉菜單插件
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</div>
//如果按鈕在容器外部，可以通過 data-target 進(jìn)行綁定舌缤。
<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown">
//Dropdown插件的方法：箕戳，但仍然需要 data-*
$('#btn').dropdown();
$('#btn').dropdown('toggle');
//Dropdown插件的事件：
show.bs.dropdown 在 show 方法調(diào)用時(shí)立即觸發(fā)。
shown.bs.dropdown 在下拉菜單完全顯示出來国撵，并且等 CSS 動(dòng)畫完成之后 觸發(fā)陵吸。
hide.bs.dropdown 在 hide 方法調(diào)用時(shí)，但還未關(guān)閉隱藏時(shí)觸發(fā)介牙。
hidden.bs.dropdown 在下拉菜單完全隱藏之后壮虫，并且等 CSS 動(dòng)畫完成之后 觸發(fā)。
$('#dropdown').on('show.bs.dropdown', function () {
alert('在調(diào)用 show 方法時(shí)立即觸發(fā)环础！');
});
2囚似、滾動(dòng)監(jiān)聽插件
data-offset 默認(rèn)值為 10，固定弄內(nèi)容距滾動(dòng)容器 10 像素以內(nèi)喳整， 就高亮顯示所對(duì)應(yīng)的菜單
data-spy 設(shè)置 scroll谆构，將設(shè)置滾動(dòng)容器監(jiān)聽
data-target 設(shè)置#nav，綁定指定監(jiān)聽的菜單
//scroll插件的方法：
$("#scroll").scrollspy({
//offset: 0,
target: "#nav"
});
activate.bs.scrollspy 每當(dāng)一個(gè)新條目被激活后都將由滾動(dòng)監(jiān)聽插件觸 發(fā)此事件框都。
//事件綁定在導(dǎo)航上
$('#nav').on('activate.bs.scrollspy', function () {
alert('新條目被激活后觸發(fā)此事件搬素！');
});
//滾動(dòng)監(jiān)聽還有一個(gè)更新容器 DOM 的方法
refresh 更新容器 DOM 的方法
function removeSec(e) {
$(e).parents('.sec').remove();
$('#content').scrollspy('refresh');
}
3呵晨、按鈕插件
//單個(gè)切換
<button class="btn btn-primary" data-toggle="button" autocomplete="off">單個(gè)切換</button>
注：在 Firefox 多次頁面加載時(shí)，按鈕可能保持表單的禁用或選擇狀態(tài)熬尺。解決方案是： 添加 autocomplete="off"摸屠。
//單選按鈕
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="radio" name="sex" autocomplete="off" checked> 男
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="sex" autocomplete="off"> 女
</label>
</div>
//復(fù)選按鈕
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="checkbox" name="fa" autocomplete="off" checked> 音樂
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> 體育
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> 美術(shù)
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> 電腦
</label>
</div>
//加載狀態(tài)
<button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> 加載狀態(tài) </button>
$('#myButton').on('click', function () {
var btn = $(this).button('loading');
setTimeout(function () {
btn.button('reset');
}, 1000);
});
Button 插件中的 button 方法中有三個(gè)參數(shù)：toggle、reset粱哼、string(比如 loading季二、 complete)。
//可代替 data-toggle="button"
$('button').on('click', function () {
$(this).button('toggle');
});
4揭措、折疊插件
//基本實(shí)例
<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> Bootstrap </button>
<div class="collapse" id="content">
<div class="well">
Bootstrap 是 Twitter 推出的一個(gè)用于前端開發(fā)的開源工具包胯舷。它由 Twitter 的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開發(fā),是一個(gè) CSS/HTML 框架。目 前,Bootstrap 最新版本為 3.0 绊含。
</div>
</div>
//Collapse插件的方法：hide桑嘶、show、toggle躬充。
$('button').on('click', function () {
$('#collapseOne').collapse('toggle');
});
//Collapse插件的事件：
show.bs.collapse 在 show 方法調(diào)用時(shí)立即觸發(fā)
shown.bs.collapse 折疊區(qū)完全顯示出來是觸發(fā)
hide.bs.collapse 在 hide 方法調(diào)用時(shí)觸發(fā)
hidden.bs.collapse 該事件在折疊區(qū)域完全隱藏之后觸發(fā)
