Bootstrap支持的JavaScript插件有哪些

本篇內(nèi)容介紹了“Bootstrap支持的JavaScript插件有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

可用的js插件庫：1、動畫過渡“transition.js”；2、模態(tài)彈窗“modal.js”；3、下拉菜單“dropdown.js”；4、選項(xiàng)卡“tab.js”；5、提示框“tooltop.js”；6、警告框“alert.js”等等。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.2版、DELL G3電腦

Bootstrap支持的JavaScript插件（庫）

一次性導(dǎo)入：

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

具體使用如下（或見右側(cè)代碼編輯器28-29行）：

<!—導(dǎo)入jQuery版本庫，因?yàn)锽ootstrap的JavaScript插件依賴于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性導(dǎo)入所有Bootstrap的JavaScript插件（壓縮版本） --><script src="js/bootstrap.min.js"></script>

特別聲明：jQuery版本庫也可以加載你本地的jQuery版本。

單獨(dú)導(dǎo)入：

為方便單獨(dú)導(dǎo)入特效文件，Bootstrap V3.2中提供了12種JavaScript插件，他們分別是：

? 動畫過渡（Transitions）:對應(yīng)的插件文件“transition.js”

? 模態(tài)彈窗（Modal）:對應(yīng)的插件文件“modal.js”

? 下拉菜單（Dropdown）：對應(yīng)的插件文件“dropdown.js”

? 滾動偵測（Scrollspy）：對應(yīng)的插件文件“scrollspy.js”

? 選項(xiàng)卡（Tab）：對應(yīng)的插件文件“tab.js”

? 提示框（Tooltips）：對應(yīng)的插件文件“tooltop.js”

? 彈出框（Popover）：對應(yīng)的插件文件“popover.js”

? 警告框（Alert）：對應(yīng)的插件文件“alert.js”

? 按鈕（Buttons）：對應(yīng)的插件文件“button.js”

? 折疊/手風(fēng)琴（Collapse）：對應(yīng)的插件文件“collapse.js”

? 圖片輪播Carousel：對應(yīng)的插件文件“carousel.js”

? 自動定位浮標(biāo)Affix：對應(yīng)的插件文件“affix.js”

上述單獨(dú)插件的下載可到github去下載（https://github.com/twbs/bootstrap）。

模態(tài)彈出框--模態(tài)彈出窗的使用（data-參數(shù)說明）

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

JavaScript觸發(fā)的彈出窗代碼：

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

模態(tài)彈出框--JavaScript觸發(fā)時的參數(shù)設(shè)置（一）

使用JavaScript觸發(fā)模態(tài)彈出窗時，Bootstrap框架提供了一些設(shè)置，主要包括屬性設(shè)置、參數(shù)設(shè)置和事件設(shè)置。

屬性設(shè)置

模態(tài)彈出窗默認(rèn)支持的自定義屬性主要有：

比如你不想讓用戶按ESC鍵關(guān)閉模態(tài)彈出窗，你就可以這樣做：

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

在Bootstrap框架中還為模態(tài)彈出窗提供了三種參數(shù)設(shè)置，具體說明如下：

事件設(shè)置：

模態(tài)彈出窗還支持四種類型的事件，分別是模態(tài)彈出窗的彈出前、彈出后，關(guān)閉前、關(guān)閉后，具體描述如下：

調(diào)用方法也非常簡單：

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

下拉菜單（Dropdown）dropdown.js

（官方發(fā)布引用地址：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="##">關(guān)于我們</a></li>
    </ul>
</p>

被點(diǎn)擊的菜單項(xiàng)鏈接或按鈕需要添加自定義屬性 data-toggle="dropdown"

Dropdown插件加載時，對所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時， 會觸發(fā)JavaScript事件代碼。當(dāng)用戶點(diǎn)擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，下拉菜單的父容器（上面的示例是 “<li class="dropdown">”）會添加一個open類名，此時下拉菜單顯示；再次單擊時，JavaScript會刪除剛添加的open類 名，此時下拉菜單將隱藏。

效果圖如下：

使用JavaScript調(diào)用dropdown()方法后，單擊激活按鈕，會彈出下拉菜單，再次單擊的時候會收起下拉菜單。

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

還可以使用參數(shù)“toggle”。當(dāng)下拉菜單隱藏時，調(diào)用dropdown(“toggle”)方法可以顯示下拉菜單，反之，如果下拉菜單顯示時，調(diào)用dropdown(“toggle”)方法可以讓下拉菜單隱藏。

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

不過使用該參數(shù)，每次單擊都要兩次toggle，就會一直是一個不變的狀態(tài)。所以，一般情況下，使用示例中不帶參數(shù)的方法。就算你需要使用參數(shù)“toggle”，也建議使用jQuery的one方法：

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

滾動監(jiān)控器  scrollspy.js

（官方發(fā)布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js）

1、當(dāng)用戶鼠標(biāo)滾動時，滾動條的位置會自動更新導(dǎo)航條中相應(yīng)的導(dǎo)航項(xiàng)

2、用戶拖動滾動條，當(dāng)滾動到@mdo時，上面的@mdo導(dǎo)航項(xiàng)就會高亮顯示：

這是因?yàn)樵摬寮梢宰詣訖z測滾動條到達(dá)哪個位置，然后在需要高亮的菜單元素上加了一個“active”樣式。

選項(xiàng)卡（Tabs）

插件引用地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-tab.js"></script>

選項(xiàng)卡Tabs是Web中一種非常常用的功能。用戶點(diǎn)擊或懸浮對應(yīng)的菜單項(xiàng)，能切換出對應(yīng)的內(nèi)容。如下圖所示：

選項(xiàng)卡組件（也就是菜單組件），對應(yīng)的是 Bootstrap的 nav-tabs）

底部可以切換的選項(xiàng)卡面板，在 Bootstrap 中通常 tab-pane 來表示

一個選項(xiàng)卡主要包括兩個部分，其一是菜單項(xiàng)，其二是內(nèi)容面板。拿下面的示例來做演示。其HTML結(jié)構(gòu)如下：

<!-- 選項(xiàng)卡組件（菜單項(xiàng)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">規(guī)則</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>
<!-- 選項(xiàng)卡面板 -->
<p id="myTabContent" class="tab-content">
    <p class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</p>
    <p class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</p>
    <p class="tab-pane fade" id="forum">論壇內(nèi)容面板</p>
    <p class="tab-pane fade" id="security">安全內(nèi)容面板</p>
    <p class="tab-pane fade" id="welfare">公益內(nèi)容面板</p>
</p>

關(guān)鍵一點(diǎn)，選項(xiàng)卡中鏈接的錨點(diǎn)要與對應(yīng)的面板內(nèi)容容器的ID相匹配。

在Bootstrap框架中選項(xiàng)卡nav-tabs已帶有樣式，前面在介紹導(dǎo)航一節(jié)中有詳細(xì)介紹。而對于面板內(nèi)容tab-pane都是隱藏的，只有當(dāng)前面板內(nèi)容才是顯示的：

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

選項(xiàng)卡--觸發(fā)切換效果

同樣的，選項(xiàng)卡也定義data屬性來觸發(fā)切換效果。當(dāng)然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求：
 1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置 data-toggle="tab"

2、并且設(shè)置 data-target="對應(yīng)內(nèi)容面板的選擇符(一般是ID)";

如果是鏈接的話，還可以通過 href="對應(yīng)內(nèi)容面板的選擇符(一般是ID)"

主要起的作用是用戶點(diǎn)擊的時候能找到該選擇符所對應(yīng)的面板內(nèi)容 tab-pane。

3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個內(nèi)容面板 tab-pane 都需要設(shè)置一個獨(dú)立的選擇符（最好是ID）與選項(xiàng)卡中的 data-target 或 href 的值匹配。

選項(xiàng)卡--為選擇卡添加fade樣式

為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中添加類名 fade，讓其產(chǎn)生漸入的效果。

選項(xiàng)卡--膠囊式選項(xiàng)卡（nav-pills）

在Bootstrap除了可以讓 nav-tabs 具有選項(xiàng)卡的切換功能之外，還可以對膠囊式 nav-pills 導(dǎo)航也具有選項(xiàng)卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點(diǎn)是將 data-toggle="tab"換成data-toggle="pill"。

調(diào)用方法:

在每個鏈接的單擊事件中調(diào)用tab("show")方法，顯示對應(yīng)的標(biāo)簽面板內(nèi)容。針對上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調(diào)用：

$(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>）

提示框--結(jié)構(gòu)

Bootstrap框架中的tooltip的插件提供了四種不同的風(fēng)格：

提示信息在左邊：

在Bootstrap框架中的提示框，結(jié)構(gòu)非常簡單，常常使用的是按鈕<button>標(biāo)簽或者鏈接<a>標(biāo)簽來制作。不管是使用按鈕還是鏈接來制作提示框，他們都有一個共性：

• 通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 src-title 來設(shè)置提示信息)。

• 通過 data-placement 自定義屬性來控制提示信息框的位置，根據(jù)四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現(xiàn)的位置在頂部、右邊、底部和左邊。

• 還有一個最重要的參數(shù)不可缺少，data-toggle="tooltip"。

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

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

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

提示框--JS設(shè)置參數(shù)方法

除了在 html 代碼中使用 data- 設(shè)置提示框參數(shù)，還可以使用 JavaScript 來設(shè)置提示框參數(shù)，主要包括：

彈出框（Popover）

插件源文件：popover.js

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

樣式文件：

? LESS版本：對應(yīng)的源文件是 popovers.less

? Sass版本：對應(yīng)的源文件是 _popovers.scss

? 編譯后的Bootstrap：對應(yīng)bootstrap.css文件第5595行～第5714行

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

不同的是：彈出框除了有標(biāo)題 title 以外還增加了內(nèi)容 content 部分。這個在提示框中是沒有的。而對于兩者有何區(qū)別呢？稍后我們會介紹，先來了解如何制作Bootstrap框架中的彈出框。

彈出框--自定義結(jié)構(gòu)屬性

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

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

從之前的學(xué)習(xí)可知，彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同，只不過在其基礎(chǔ)上增加了一個 data-content 屬性，用來設(shè)置彈出框的內(nèi)容。其實(shí)兩插件也有略微的不同：

• 提示框 tooltip 的默認(rèn)觸發(fā)事件是 hover 和 focus，而彈出框 popover 是 click

• 提示框 tooltip 只有一個內(nèi)容(title)，而彈出框不僅可以設(shè)置標(biāo)題（title）還可以設(shè)置內(nèi)容(content)

警告框（Alert）

插件源文件：alert.js

引用地址：

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

警告框--使用聲明式觸發(fā)警告框

如果通過自定義的HTML屬性（聲明式）來觸發(fā)警告框，需要在關(guān)閉按鈕上設(shè)置自定義屬性data-dismiss="alert"，如下所示：

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

運(yùn)行效果如下：

點(diǎn)擊X會關(guān)閉整個警告框。

其實(shí)關(guān)閉按鈕，不一定非要用X號，也可以是普通的按鈕元素或者鏈接元素，只需要保證關(guān)閉元素帶有自定義屬性data-dismiss="alert"即可

警告框--JavaScript觸發(fā)警告框

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

html代碼:

<p class="alert alert-warning" role="alert" id="myAlert">
    <h5>謹(jǐn)防被騙</h5>
    <p>請確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識的人...</p>
    <button type="button"  class="btn btn-danger" id="close">關(guān)閉</button>
</p>

通過下面的JavaScript代碼來觸發(fā)：

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

運(yùn)行效果如下：

按鈕插件（Button）

插件源文件：button.js

引用地址：

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

按鈕插件--按鈕加載狀態(tài)

通過按鈕可以設(shè)計(jì)狀態(tài)提示，當(dāng)單擊按鈕時，會顯示loading狀態(tài)信息。例如，點(diǎn)擊“加載”按鈕，會觸發(fā)按鈕的加載的狀態(tài)。如下所示：

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

通過data-loading-text屬性定義加載的文本信息，然后通過JavaScript給按鈕綁定一個事件，并給按鈕添加一個button("loading")方法來激活按鈕的加載狀態(tài)行為。如下所示：

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

運(yùn)行效果如下：

點(diǎn)擊前：

點(diǎn)擊后：

按鈕插件--模擬單選擇按鈕

模擬單選擇按鈕是通過一組按鈕來實(shí)現(xiàn)單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設(shè)計(jì)更具個性化，可以定制出更美觀的單選按鈕組。
在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>

運(yùn)行效果如下：

按鈕插件--模擬復(fù)選按鈕

使用按鈕組來模擬復(fù)選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實(shí)現(xiàn)。唯一不同的是，將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>

運(yùn)行效果如下：

手風(fēng)琴（Collapse）

插件源文件：collapse.js

引用地址：

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

Bootstrap 框架中 Collapse插件(折疊)其實(shí)就是我們常見的手風(fēng)琴效果。點(diǎn)擊標(biāo)題，可以讓其對應(yīng)的內(nèi)容顯示或隱藏。如下圖所示：

圖片輪播（Carousel）

插件對應(yīng)的文件：carousel.js

引用地址：

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

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

上面的輪播效果是6張廣告圖從右向左播放，鼠標(biāo)懸停在圖片時會暫停播放，如果鼠標(biāo)懸?；騿螕粲蚁陆菆A點(diǎn)時，會顯示對應(yīng)的圖片。這種圖片輪播效果，在Bootstrap框架中是通過Carousel插件來實(shí)現(xiàn)，在下面小節(jié)中我們將要介紹的是如何使用Carouse插件實(shí)現(xiàn)圖片輪播效果。

第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個容器定義一個 ID 值，方便后面采用 data 屬性來聲明觸發(fā)。

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

第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 p.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個li)，一般采用有順列表來制作：

<p id="slidershow" class="carousel">
<!-- 設(shè)置圖片輪播的順序 -->
    <ol

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

圖片輪播--JavaScript觸發(fā)方法

默認(rèn)情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會自動加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發(fā)輪播圖片切換。具體使用方法如下：

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

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

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

在 carousel() 方法中可以設(shè)置具體的參數(shù)，如：

使用時，在初始化插件的時候可以傳關(guān)相關(guān)的參數(shù)，如：

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

實(shí)際上，當(dāng)我們給carousel()方法配置參數(shù)之后，輪播效果就能自動切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調(diào)用方法，簡單說明如下：

• .carousel("cycle")：從左向右循環(huán)播放；

• .carousel("pause")：停止循環(huán)播放；

• .carousel("number")：循環(huán)到指定的幀，下標(biāo)從0開始，類似數(shù)組；

• .carousel("prev")：返回到上一幀；

• .carousel("next")：下一幀

固定定位（Affix）

插件文件：源文件 affix.js

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

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

? 頂部固定

? 側(cè)邊欄固定

? 底部固定

固定定位--聲明式觸發(fā)固定定位

Affix 插件可以對任何元素進(jìn)行固定定位，其中比較簡單的方法，就是通過自定義屬性 data 來觸發(fā)。其主要包括兩個參數(shù)：

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

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

• data-offset-top 用來設(shè)置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當(dāng)用戶從頂部向下拖動滾動條，當(dāng)滾動的距離大于 90px 時，affix 元素不再滾動，就會固定在瀏覽器窗口頂部。

• data-offset-bottom 剛好與 data-offset-top 相反。

具體使用如下：

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

分開設(shè)置 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 要聲明滾動監(jiān)控。

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

運(yùn)行效果如下：

注意，請?jiān)趯捚聊Ｊ较虏榭葱Ч?jù)我測試下來，使用聲明式，就算設(shè)置了 data-offset-top 的值也會失效，需要在樣式中給 affix 設(shè)置一個top值，與 data-offset-top 值相等。data-offset-bottom一樣。

在線自定義設(shè)置--Bootstrap組件

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

每個部分都有對應(yīng)的列表清單，在自定義配置時候，可以根據(jù)自己需求進(jìn)行選擇，比如，我自己的 Bootstrap 框架中，不需要打印樣式、code、Glyphicons、等等，那么只需要不選中它們：

“Bootstrap支持的JavaScript插件有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！