知識點：

1、下拉菜單插件
2、滾動監聽插件
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="#">產品</a></li>
           <li><a href="#">資訊</a></li>
           <li><a href="#">關于</a></li>
       </ul>
   </div>

   //如果按鈕在容器外部，可以通過 data-target 進行綁定。
     <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 方法調用時立即觸發。
   shown.bs.dropdown    在下拉菜單完全顯示出來，并且等 CSS 動畫完成之后 觸發。
   hide.bs.dropdown     在 hide 方法調用時，但還未關閉隱藏時觸發。
   hidden.bs.dropdown   在下拉菜單完全隱藏之后，并且等 CSS 動畫完成之后 觸發。

   $('#dropdown').on('show.bs.dropdown', function () {
        alert('在調用 show 方法時立即觸發！');
   });

2、滾動監聽插件

data-offset 默認值為 10，固定弄內容距滾動容器 10 像素以內， 就高亮顯示所對應的菜單
data-spy 設置 scroll，將設置滾動容器監聽
data-target 設置#nav，綁定指定監聽的菜單

   //scroll插件的方法：
   $("#scroll").scrollspy({
        //offset: 0,
        target: "#nav"
   });

activate.bs.scrollspy 每當一個新條目被激活后都將由滾動監聽插件觸 發此事件。
//事件綁定在導航上
$('#nav').on('activate.bs.scrollspy', function () {
alert('新條目被激活后觸發此事件！');
});

   //滾動監聽還有一個更新容器 DOM 的方法
   refresh  更新容器 DOM 的方法
   function removeSec(e) {
       $(e).parents('.sec').remove();
       $('#content').scrollspy('refresh');
   }

3、按鈕插件

   //單個切換
   <button class="btn btn-primary" data-toggle="button" autocomplete="off">單個切換</button>
   注：在 Firefox 多次頁面加載時，按鈕可能保持表單的禁用或選擇狀態。解決方案是： 添加 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>
   //復選按鈕
   <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"> 美術
       </label>
       <label for="" class="btn btn-primary">
            <input type="checkbox" name="fa" autocomplete="off"> 電腦
       </label>
   </div>

   //加載狀態
   <button id="myButton" 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');
        }, 1000);
   });

   Button 插件中的 button 方法中有三個參數：toggle、reset、string(比如 loading、 complete)。
   //可代替    data-toggle="button"
   $('button').on('click', function () {
        $(this).button('toggle');
   });

4、折疊插件

   //基本實例
   <button class="btn btn-primary" data-toggle="collapse" data-target="#content"> Bootstrap </button>
   <div class="collapse" id="content">
        <div class="well">
            Bootstrap 是 Twitter 推出的一個用于前端開發的開源工具包。它由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發,是一個 CSS/HTML 框架。目 前,Bootstrap 最新版本為 3.0 。
        </div>
   </div>

   //Collapse插件的方法：hide、show、toggle。
   $('button').on('click', function () {
        $('#collapseOne').collapse('toggle');
   });

   //Collapse插件的事件：
   show.bs.collapse     在 show 方法調用時立即觸發
   shown.bs.collapse    折疊區完全顯示出來是觸發
   hide.bs.collapse     在 hide 方法調用時觸發
   hidden.bs.collapse   該事件在折疊區域完全隱藏之后觸發