bootstrap可以用哪些js庫

可用的js外掛庫：1、動畫過渡「transition.js」；2、模態彈窗「modal.js」；3、下拉式選單「dropdown.js」；4、索引標籤「tab.js」；5、提示框「tooltop.js」；6、警告框「alert.js」等等。

本教學操作環境：Windows7系統、bootsrap3.2版、DELL G3電腦

Bootstrap支援的JavaScript外掛（庫）

一次性匯入：

Bootstrap提供了一個單一的檔案，這個檔案包含了Bootstrap的所有JavaScript外掛，即bootstrap.js（壓縮版本：bootstrap.min.js）。

具體使用如下（或見右側程式碼編輯器28-29行）：

<!—匯入jQuery版本庫，因為Bootstrap的JavaScript外掛依賴於jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性匯入所有Bootstrap的JavaScript外掛（壓縮版本） --><script src="js/bootstrap.min.js"></script>

特別宣告：jQuery版本庫也可以載入你原生的jQuery版本。

單獨匯入：

為方便單獨匯入特效檔案，Bootstrap V3.2中提供了12種JavaScript外掛，他們分別是：

☑ 動畫過渡（Transitions）:對應的外掛檔案「transition.js」

☑ 模態彈窗（Modal）:對應的外掛檔案「modal.js」

☑ 下拉式選單（Dropdown）：對應的外掛檔案「dropdown.js」

☑ 捲動偵測（Scrollspy）：對應的外掛檔案「scrollspy.js」

☑ 索引標籤（Tab）：對應的外掛檔案「tab.js」

☑ 提示框（Tooltips）：對應的外掛檔案「tooltop.js」

☑ 彈出框（Popover）：對應的外掛檔案「popover.js」

☑ 警告框（Alert）：對應的外掛檔案「alert.js」

☑ 按鈕（Buttons）：對應的外掛檔案「button.js」

☑ 摺疊/手風琴（Collapse）：對應的外掛檔案「collapse.js」

☑ 圖片輪播Carousel：對應的外掛檔案「carousel.js」

☑ 自動定位浮標Affix：對應的外掛檔案「affix.js」

上述單獨外掛的下載可到github去下載（https://github.com/twbs/bootstrap）。

模態彈出框--模態彈出窗的使用（data-引數說明）

除了通過data-toggle和data-target來控制模態彈出窗之外，Bootstrap框架針對模態彈出框還提供了其他自定義data-屬性，來控制模態彈出窗。比如說:是否有灰色背景modal-backdrop，是否可以按ESC鍵關閉模態彈出窗。有關於Modal彈出窗自定義屬性相關說明如下所示：

JavaScript觸發的彈出窗程式碼：

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});

模態彈出框--JavaScript觸發時的引數設定（一）

使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設定，主要包括屬性設定、引數設定和事件設定。

屬性設定

模態彈出窗預設支援的自定義屬性主要有：

比如你不想讓使用者按ESC鍵關閉模態彈出窗，你就可以這樣做：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({            keyboard:false
        });
    });
});

在Bootstrap框架中還為模態彈出窗提供了三種引數設定，具體說明如下：

事件設定：

模態彈出窗還支援四種型別的事件，分別是模態彈出窗的彈出前、彈出後，關閉前、關閉後，具體描述如下：

呼叫方法也非常簡單：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 處理程式碼...
})

下拉式選單（Dropdown）dropdown.js

（官方釋出參照地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js）

<p class="navbar navbar-default" id="navmenu">
    <a href="##" class="navbar-brand">W3cplus</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教學<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                <li role="presentation"><a href="##">HTML5</a></li>
                <li role="presentation"><a href="##">Sass</a></li>
            </ul>
        </li>
        <li><a href="##">前端論壇</a></li>
        <li><a href="##">關於我們</a></li>
    </ul>
</p>

被點選的選單項連結或按鈕需要新增自定義屬性 data-toggle="dropdown"

Dropdown外掛載入時，對所有帶 有「data-toggle=dropdown」樣式的元素繫結了事件，使用者單擊帶有「data-toggle=dropdown」樣式的連結或按鈕時， 會觸發JavaScript事件程式碼。當使用者點選帶有「data-toggle=dropdown」樣式的連結或按鈕時，下拉式選單的父容器（上面的範例是 「<li class="dropdown">」）會新增一個open類名，此時下拉式選單顯示；再次單擊時，JavaScript會刪除剛新增的open類 名，此時下拉式選單將隱藏。

效果圖如下：

使用JavaScript呼叫dropdown()方法後，單擊啟用按鈕，會彈出下拉式選單，再次單擊的時候會收起下拉式選單。

$(function(){
    $(".dropdown-toggle").dropdown();
})

還可以使用引數「toggle」。當下拉式選單隱藏時，呼叫dropdown(「toggle」)方法可以顯示下拉式選單，反之，如果下拉式選單顯示時，呼叫dropdown(「toggle」)方法可以讓下拉式選單隱藏。

$(function(){
    $(".dropdown-toggle").dropdown("toggle");
})

不過使用該引數，每次單擊都要兩次toggle，就會一直是一個不變的狀態。所以，一般情況下，使用範例中不帶引數的方法。就算你需要使用引數「toggle」，也建議使用jQuery的one方法：

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})

捲動監控器 scrollspy.js

（官方釋出參照地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js）

1、當使用者滑鼠捲動時，卷軸的位置會自動更新導覽列中相應的導航項

2、使用者拖動卷軸，當捲動到@mdo時，上面的@mdo導航項就會高亮顯示：

這是因為該外掛可以自動檢測卷軸到達哪個位置，然後在需要高亮的選單元素上加了一個「active」樣式。

索引標籤（Tabs）

外掛參照地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tab.js"></script>

索引標籤Tabs是Web中一種非常常用的功能。使用者點選或懸浮對應的選單項，能切換出對應的內容。如下圖所示：

索引標籤元件（也就是選單元件），對應的是 Bootstrap的 nav-tabs）

底部可以切換的索引標籤面板，在 Bootstrap 中通常 tab-pane 來表示

一個索引標籤主要包括兩個部分，其一是選單項，其二是內容面板。拿下面的範例來做演示。其HTML結構如下：

<!-- 索引標籤元件（選單項nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab">規則</a></li>
    <li><a href="#forum" role="tab">論壇</a></li>
    <li><a href="#security" role="tab">安全</a></li>
    <li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 索引標籤面板 -->
<p id="myTabContent" class="tab-content">
    <p class="tab-pane fade in active" id="bulletin">公告內容面板</p>
    <p class="tab-pane fade" id="rule">規則內容面板</p>
    <p class="tab-pane fade" id="forum">論壇內容面板</p>
    <p class="tab-pane fade" id="security">安全內容面板</p>
    <p class="tab-pane fade" id="welfare">公益內容面板</p>
</p>

關鍵一點，索引標籤中連結的錨點要與對應的面板內容容器的ID相匹配。

在Bootstrap框架中索引標籤nav-tabs已帶有樣式，前面在介紹導航一節中有詳細介紹。而對於面板內容tab-pane都是隱藏的，只有當前面板內容才是顯示的：

/*bootstrap.css檔案第3758行～第3763行*/
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

索引標籤--觸發切換效果

同樣的，索引標籤也定義data屬性來觸發切換效果。當然前提你也要先載入bootstrap.js或者是tab.js。宣告式觸發索引標籤需要滿足以下幾點要求：
1、索引標籤導航連結中要設定 data-toggle="tab"

2、並且設定 data-target="對應內容面板的選擇符(一般是ID)";

如果是連結的話，還可以通過 href="對應內容面板的選擇符(一般是ID)"

主要起的作用是使用者點選的時候能找到該選擇符所對應的面板內容 tab-pane。

3、面板內容統一放在 tab-content 容器中，而且每個內容面板 tab-pane 都需要設定一個獨立的選擇符（最好是ID）與索引標籤中的 data-target 或 href 的值匹配。

索引標籤--為選擇卡新增fade樣式

為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中新增類名 fade，讓其產生漸入的效果。

索引標籤--膠囊式索引標籤（nav-pills）

在Bootstrap除了可以讓 nav-tabs 具有索引標籤的切換功能之外，還可以對膠囊式 nav-pills 導航也具有索引標籤的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關鍵一點是將 data-toggle="tab"換成data-toggle="pill"。

呼叫方法:

在每個連結的單擊事件中呼叫tab("show")方法，顯示對應的標籤面板內容。針對上面的範例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然後通過下面的指令碼來呼叫：

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})

提示框(Tooltip)

外掛原始檔：tooltip.js

（參照地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tooltip.js"></script>）

提示框--結構

Bootstrap框架中的tooltip的外掛提供了四種不同的風格：

提示資訊在左邊：

在Bootstrap框架中的提示框，結構非常簡單，常常使用的是按鈕<button>標籤或者連結<a>標籤來製作。不管是使用按鈕還是連結來製作提示框，他們都有一個共性：

• 通過 title 屬性的值來定義提示資訊(也可以使用自定義屬性 src-title 來設定提示資訊)。
• 通過 data-placement 自定義屬性來控制提示資訊框的位置，根據四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現的位置在頂部、右邊、底部和左邊。
• 還有一個最重要的引數不可缺少，data-toggle="tooltip"。

  <button type="button" 
          class="btnbtn-default" 
          data-toggle="tooltip" 
          data-placement="left" 
          src-title="提示框居左">
          提示框居左
  </button>

提示框--其他的自定義屬性

除此之外，提示框還有其他的自定義屬性，每個自定義屬性都具自身存在的意義，如下表所示：

提示框--JS設定引數方法

除了在 html 程式碼中使用 data- 設定提示框引數，還可以使用 JavaScript 來設定提示框引數，主要包括：

彈出框（Popover）

外掛原始檔：popover.js

（參照地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-popover.js"></script>）

樣式檔案：

☑ LESS版本：對應的原始檔是 popovers.less

☑ Sass版本：對應的原始檔是 _popovers.scss

☑ 編譯後的Bootstrap：對應bootstrap.css檔案第5595行～第5714行

彈出框(Popover)僅從外表上看，和前面介紹的提示框（Tooltip）長得差不多，如下所示：

不同的是：彈出框除了有標題 title 以外還增加了內容 content 部分。這個在提示框中是沒有的。而對於兩者有何區別呢？稍後我們會介紹，先來了解如何製作Bootstrap框架中的彈出框。

彈出框--自定義結構屬性

同樣在彈出框製作時，可以在HTML中定義下表所列的自定義屬性：

彈出框--提示框和彈出框的異同

從之前的學習可知，彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同，只不過在其基礎上增加了一個 data-content 屬性，用來設定彈出框的內容。其實兩外掛也有略微的不同：

• 提示框 tooltip 的預設觸發事件是 hover 和 focus，而彈出框 popover 是 click
• 提示框 tooltip 只有一個內容(title)，而彈出框不僅可以設定標題（title）還可以設定內容(content)

警告框（Alert）

外掛原始檔：alert.js

參照地址：

http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-alert.min.js

警告框--使用宣告式觸發警告框

如果通過自定義的HTML屬性（宣告式）來觸發警告框，需要在關閉按鈕上設定自定義屬性data-dismiss="alert"，如下所示：

<p class="alert alert-success" role="alert">
    <button class="close"  data-dismiss="alert" type="button" >&times;</button>
    <p>恭喜您操作成功！</p>
</p>

執行效果如下：

點選X會關閉整個警告框。

其實關閉按鈕，不一定非要用X號，也可以是普通的按鈕元素或者連結元素，只需要保證關閉元素帶有自定義屬性data-dismiss="alert"即可

警告框--JavaScript觸發警告框

除了通過自定義data-dismiss="alert"屬性來觸發警告框關閉之外，還可以通過JavaScript方法。只需要在關閉按鈕上繫結一個事件。如下所示：

html程式碼:

<p class="alert alert-warning" role="alert" id="myAlert">
    <h4>謹防被騙</h4>
    <p>請確認您轉賬的資訊是你的親朋好友，不要輕意相信不認識的人...</p>
    <button type="button"  class="btn btn-danger" id="close">關閉</button>
</p>

通過下面的JavaScript程式碼來觸發：

$(function(){
    $("#close").on("click",function(){        
    $(this).alert("close");
    });
});

執行效果如下：

按鈕外掛（Button）

外掛原始檔：button.js

參照地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-button.min.js"></script>

按鈕外掛--按鈕載入狀態

通過按鈕可以設計狀態提示，當單擊按鈕時，會顯示loading狀態資訊。例如，點選「載入」按鈕，會觸發按鈕的載入的狀態。如下所示：

<button class="btnbtn-primary" data-loading-text="正在載入中,請稍等..." type="button" id="loaddingBtn">載入</button>

通過data-loading-text屬性定義載入的文字資訊，然後通過JavaScript給按鈕繫結一個事件，並給按鈕新增一個button("loading")方法來啟用按鈕的載入狀態行為。如下所示：

$(function(){
    $("#loaddingBtn").click(function () {
        $(this).button("loading");
      });
});

執行效果如下：

點選前：

點選後：

按鈕外掛--模擬單選擇按鈕

模擬單選擇按鈕是通過一組按鈕來實現單選擇操作。使用按鈕組來模擬無線電鈕組，能夠讓設計更具個性化，可以客製化出更美觀的無線電鈕組。
在Bootstrap框架中按鈕外掛中，可以通過給按鈕組自定義屬性data-toggle="buttons"，如下所示：

<p class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</p>

執行效果如下：

按鈕外掛--模擬核取按鈕

使用按鈕組來模擬核取按鈕和模擬無線電鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實現。唯一不同的是，將input[type="radio"]換成input[type="checkbox"]，如下所示：

<p class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options1">電影
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options2">音樂
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options3">遊戲
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options4">攝影
    </label>
</p>

執行效果如下：

手風琴（Collapse）

外掛原始檔：collapse.js

參照地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script>

Bootstrap 框架中 Collapse外掛(摺疊)其實就是我們常見的手風琴效果。點選標題，可以讓其對應的內容顯示或隱藏。如下圖所示：

圖片輪播（Carousel）

外掛對應的檔案：carousel.js

參照地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-carousel.min.js"></script>

要顯示的效果就是多幅圖片輪迴播放，如下圖所示：

上面的輪播效果是6張廣告圖從右向左播放，滑鼠懸停在圖片時會暫停播放，如果滑鼠懸停或單擊右下角圓點時，會顯示對應的圖片。這種圖片輪播效果，在Bootstrap框架中是通過Carousel外掛來實現，在下面小節中我們將要介紹的是如何使用Carouse外掛實現圖片輪播效果。

第一步：設計輪播圖片的容器。在 Bootstrap 框架中採用 carousel 樣式，並且給這個容器定義一個 ID 值，方便後面採用 data 屬性來宣告觸發。

<p id="slidershow" class="carousel"></p>

第二步：設計輪播圖片計數器。在容器 p.carousel 的內部新增輪播圖片計算器，採用 carousel-indicators 樣式，其主要功能是顯示當前圖片的播放順序(有幾張圖片就放置幾個li)，一般採用有順列表來製作：

<p id="slidershow" class="carousel">
<!-- 設定圖片輪播的順序 -->
    <ol

除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播元件還支援其他三個自定義屬性：

圖片輪播--JavaScript觸發方法

預設情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面載入之後就會自動載入輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發輪播圖片切換。具體使用方法如下：

$(".carousel").carousel();

也可以通過容器的 ID 來指定：

$("#slidershow").carousel();

在 carousel() 方法中可以設定具體的引數，如：

使用時，在初始化外掛的時候可以傳關相關的引數，如：

$("#slidershow").carousel({
       interval: 3000
});

實際上，當我們給carousel()方法設定引數之後，輪播效果就能自動切換。但 Bootstrap 框架中的 carousel 外掛還給使用者提供了幾種特殊的呼叫方法，簡單說明如下：

• .carousel("cycle")：從左向右迴圈播放；
• .carousel("pause")：停止迴圈播放；
• .carousel("number")：迴圈到指定的幀，下標從0開始，類似陣列；
• .carousel("prev")：返回到上一幀；
• .carousel("next")：下一幀

固定定位（Affix）

外掛檔案：原始檔 affix.js

地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-affix.js

Affix 效果常見的有以下三種：

☑ 頂部固定

☑ 側邊欄固定

☑ 底部固定

固定定位--宣告式觸發固定定位

Affix 外掛可以對任何元素進行固定定位，其中比較簡單的方法，就是通過自定義屬性 data 來觸發。其主要包括兩個引數：

1、data-spy：取值 affix，表示元素固定不變的。

2、data-offset：整數值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top 和 data-offset-bottom。

• data-offset-top 用來設定元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當使用者從頂部向下拖動卷軸，當捲動的距離大於 90px 時，affix 元素不再捲動，就會固定在瀏覽器視窗頂部。
• data-offset-bottom 剛好與 data-offset-top 相反。

具體使用如下：

<p data-spy="affix" data-offset="90">affix元素</p>

分開設定 data-offset 值方式：

<p data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</p>

我們來看一個簡單的範例：

<nav class="navbar navbar-default" role="navigation">
    …
</nav>
<p class="container">
    <p class="row">
        <p class="col-md-3" id="sidebarMenu">
            <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20">
                     …
            </ul>
        </p>
        <p class="col-md-9">
                …
        </p>
    </p>
</p>

注意，在 body 要宣告捲動監控。

<body data-spy="scroll" data-target="sidebarMenu">

執行效果如下：

注意，請在寬屏模式下檢視效果。據我測試下來，使用宣告式，就算設定了 data-offset-top 的值也會失效，需要在樣式中給 affix 設定一個top值，與 data-offset-top 值相等。data-offset-bottom一樣。

線上自定義設定--Bootstrap元件

在 Bootstrap 元件設定這一部分，提供了公共樣式（Common CSS），UI 元件(Components)和 JavaScript 元件(JavaScript components)三個部分，如下圖所示：

每個部分都有對應的列表清單，在自定義設定時候，可以根據自己需求進行選擇，比如，我自己的 Bootstrap 框架中，不需要列印樣式、code、Glyphicons、等等，那麼只需要不選中它們：

更多關於bootstrap的相關知識，可存取：！！

以上就是bootstrap可以用哪些js庫的詳細內容，更多請關注TW511.COM其它相關文章！