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

創(chuàng)新互聯(lián)專注于臨泉網(wǎng)站建設(shè)服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供臨泉營銷型網(wǎng)站建設(shè)，臨泉網(wǎng)站制作、臨泉網(wǎng)頁設(shè)計、臨泉網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務，打造臨泉網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨泉網(wǎng)站排名全網(wǎng)營銷落地服務。

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

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

Bootstrap支持的JavaScript插件（庫）

一次性導入：

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

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

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

單獨導入：

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

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

?模態(tài)彈窗（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）。

模態(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)彈出窗默認支持的自定義屬性主要有：

比如你不想讓用戶按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）

    W3cplus
    
        
            教程
            
                CSS3
                HTML5
                Sass
            
        
        
前端論壇
        
關(guān)于我們
    

被點擊的菜單項鏈接或按鈕需要添加自定義屬性 data-toggle="dropdown"

Dropdown插件加載時，對所有帶 有“data-toggle=dropdown”樣式的元素綁定了事件，用戶單擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時， 會觸發(fā)JavaScript事件代碼。當用戶點擊帶有“data-toggle=dropdown”樣式的鏈接或按鈕時，下拉菜單的父容器（上面的示例是 “

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

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

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

    公告

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

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

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

    ×
    
恭喜您操作成功！

    
謹防被騙
    
請確認您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認識的人...
    關(guān)閉

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

加載

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

    
        男
    
    
        女
    
    
        未知
    

    
        電影
    
    
        音樂
    
    
        游戲
    
    
        攝影
    

    
除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個自定義屬性：
屬性名稱
類型
默認值
描述
data-interval
number
5000
幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環(huán)
data-pause
string
hover
默認鼠標懸停留在幻燈片區(qū)域即停止播放，離開即開始播放
data-wrap
布爾值
true
輪播是否持續(xù)循環(huán)
圖片輪播--JavaScript觸發(fā)方法
默認情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會自動加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發(fā)輪播圖片切換。具體使用方法如下：
$(".carousel").carousel();
也可以通過容器的 ID 來指定：
$("#slidershow").carousel();
在 carousel() 方法中可以設(shè)置具體的參數(shù)，如：
屬性名稱
類型
默認值
描述
interval
number
5000
幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環(huán)
pause
string
hover
默認鼠標懸停留在幻燈片區(qū)域即停止播放，離開即開始播放
wrap
布爾值
true
輪播是否持續(xù)循環(huán)
使用時，在初始化插件的時候可以傳關(guān)相關(guān)的參數(shù)，如：
$("#slidershow").carousel({
       interval: 3000
});
實際上，當我們給carousel()方法配置參數(shù)之后，輪播效果就能自動切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調(diào)用方法，簡單說明如下：
.carousel("cycle")：從左向右循環(huán)播放；
.carousel("pause")：停止循環(huán)播放；
.carousel("number")：循環(huán)到指定的幀，下標從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 插件可以對任何元素進行固定定位，其中比較簡單的方法，就是通過自定義屬性 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，當用戶從頂部向下拖動滾動條，當滾動的距離大于 90px 時，affix 元素不再滾動，就會固定在瀏覽器窗口頂部。
data-offset-bottom剛好與 data-offset-top 相反。
具體使用如下：
affix元素
分開設(shè)置 data-offset 值方式：
affix元素
我們來看一個簡單的示例：

    …


    
        
            
                     …
            
        

        
                …
        

    

注意，在 body 要聲明滾動監(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)三個部分，如下圖所示：
每個部分都有對應的列表清單，在自定義配置時候，可以根據(jù)自己需求進行選擇，比如，我自己的 Bootstrap 框架中，不需要打印樣式、code、Glyphicons、等等，那么只需要不選中它們：
“Bootstrap支持的JavaScript插件有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
            
            
                        

            分享標題：Bootstrap支持的JavaScript插件有哪些            

            文章位置：http://weahome.cn/article/igegjj.html