Bootstrap支持的JavaScript插件有哪些

本篇內容介紹了“Bootstrap支持的JavaScript插件有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

可用的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">
    <h5>謹防被騙</h5>
    <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支持的JavaScript插件有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！