在bs3.X中，提供了12種JavaScript插件，分別是：動畫過渡（Transition）、模態彈窗（Modal）、下拉菜單（Dropdown）、滾動偵測（Scrollspy）、選項卡（Tab）、提示 框（Tooltip）、彈出框（Popover）、警告框（Alert）、按鈕（Button）、折疊（Collapse）、旋轉輪播（Carousel）、定位浮標（Affix）。
由於各種加班,身心疲憊...
動畫過渡
源文件：transition.js
使用的動畫過渡效果全部使用了 CSS3的語法，所以IE6、IE7、IE8是不能用動畫過渡效果。
默認帶過渡效果的
- 模態彈窗（Modal）的滑動和漸變效果；
- 選項卡（Tab）的漸變效果；
- 警告框（Alert）的漸變效果；
- 旋轉輪播（Carousel）的滑動效果。
源碼
js源碼
function transitionEnd() { var el = document.createElement('bootstrap') var transEndEventNames = { WebkitTransition: 'webkitTransitionEnd', MozTransition: 'transitionend', OTransition: 'oTransitionEnd otransitionend', transition: 'transitionend' } for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return { end: transEndEventNames[name] } } } return false // explicit for ie8 ( ._.) }
通過以上代碼判斷是否支持動畫過渡效果。
CSS源碼
.fade { opacity: 0; /*100%透明*/ -webkit-transition: opacity .15s linear; /*透明度，勻速變化0.15秒*/ transition: opacity .15s linear; } .fade.in { /*應用in樣式，表示全部打開*/ opacity: 1; /*完全不透明*/ } .modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; /*減速運行*/ -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -25%); /*向下移動25%的距離，從而產生向下的 動畫視覺*/ -ms-transform: translate(0, -25%); transform: translate(0, -25%); } .modal.in .modal-dialog { /*頁面完整顯示時，回歸到原始位置*/ -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
模態彈窗
源文件：modal.js
模態彈窗（也叫popup，Bootstrap里稱為Modal）是絕大部分交互式網站都需要的一種功能，一般有以下幾種用法：
- 提示信息、警告信息、大文本等；
- 確認提示（多按鈕）；
- 顯示表單元素（一般使用ajax操作等功能）；
- 其他需要特殊顯示的信息（如單擊縮略圖時放大圖片）。
使用
彈窗組件使用了3層 div容器元素，其分別應用了modal、modal-dialog、modalcontent樣式。然后在真正的內容容器modal-content內包括了彈窗 的頭（header）、內容（body）、尾（footer）3個部分，分別應用了3個樣式：modal-header、modal-body、modal-footer。
使用data-target
<a href="#" class="btn btn-success" data-toggle="modal" data-target=".modal">啟動模態框</a> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">Modal Title</div> <div class="modal-body"> This is body. </div> <div class="modal-footer"> <a href="#" class="btn btn-default" data-dismiss="modal">關閉</a> <a href="#" class="btn btn-success">保存</a> </div> </div> </div> </div>
js會控制在彈出modal之前，會加一個.modal-backdrop 用來設為灰色背景。
下拉菜單
源文件：dropdown.js
一般下拉菜單都是在導航條（navbar）和選項卡（tab）上實現。
實現原理：
- 在網頁加載的時候，對所有帶有datatoggle="dropdown"樣式的元素進行事件綁定。
- 用戶單擊帶有data-toggle="dropdown"樣式的鏈接或按鈕時，觸發JavaScript事件代碼。
- Javascript事件代碼在父容器（本例是：<li class="dropdown">）上加一個.open樣式。
- 默認隱藏的.dropdown-menu菜單在外部有了.open樣式后，即可顯示出來，從而達到預期的效果。
使用：
- 菜單樣式和菜單項保持一致（即按照第4節的要求編寫）。
- 被單擊的鏈接或者按鈕上需要應用data-toggle="dropdown"樣式，以便在初始化的時候JavaScript可以監控單擊事件
使用data-target
<a href="#" class="btn btn-default" data-toggle="dropdown" data-target="#d">啟動下拉框</a> <div class="dropdown" id="d"> <a href="#" class="btn btn-default" data-toggle="dropdown">啟動下拉框</a> <ul class="dropdown-menu"> <li><a>菜單1</a></li> <li><a>菜單2</a></li> </ul> </div>
滾動偵測
源文件：scrollspy.js
滾動偵測（ScrollSpy）插件是根據滾動的位置自動更新導航 條中相應的導航項
使用：
- 設置滾動容器，即在所要偵測的元素上設置data-target="#selector" data-spy="scroll"屬性。
- 設置菜單鏈接容器，該容器的id（或樣式）和data-target 屬性所對應的選擇符應一致。
- 在菜單容器內，必須有.nav樣式的元素，並且在其內部有 li元素，li內包含的a元素才是可以偵測高亮的菜單鏈接，即符 合.nav li > a這種選擇符的條件。
body上用data-spy
<body data-target="#selector" data-spy="scroll"> <div id="selector"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a> <ul class="dropdown-menu"> <li class=""><a href="#one">one</a></li> <li class=""><a href="#two">two</a></li> <li class="divider"></li> <li class=""><a href="#three">three</a></li> </ul> </li> </ul> </nav> </div> <div style="overflow: auto"> <h4 id="fat">@fat</h4> <p>具體內容</p> <h4 id="mdo">@mdo</h4><p>具體內容</p> <h4 id="one">one</h4><p>具體內容</p> <h4 id="two">two</h4><p>具體內容</p> <h4 id="three">three</h4><p>具體內容</p> </div> <script src="Scripts/jquery-1.9.1.js"></script> <script src="Scripts/bootstrap.js"></script> </body>
注意：
子菜單雖然會高亮，但不會打開，為了展示效果，需要手 動打開下拉菜單查看。
該插件所需要的導航條只能在擁有.nav樣式的ul/li元素上起 作用
選項卡
源文件：tab.js
就像我們平時使用的Windows操作系統里的選項卡設置一樣，單擊一個選項，下面就顯示對應的選項卡面板
使用：
- 選項卡導航和選項卡面板要同時有（但不一定要放在一 起）。
- 導航鏈接里要設置data-toggle="tab"，並且還要設置data-target="選擇符"（或href="選擇符"），以便單擊的時候能找到該選擇符所對應的tab-pane面板。
- tab-pane要放在tab-content里面，要有id（或者CSS樣式） 並與data-target="選擇符"（或href="選擇符"）一致
<ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">home</a> </li> <li><a href="#concact" data-toggle="tab">concact</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> <h3>Home</h3> </div> <div class="tab-pane" id="concact"> <h3>concact</h3> </div> </div>
提示框
源文件：tooltip.js
鼠標移動到特定的元素上時，顯示相關的提示語。類似於abbr的title功能，不過效果更加漂亮實用。
使用
- 指定的data-toggle="tooltip"屬性
- 然后再定義要顯示的內容,可以在title也可以用data-original-title
- js初始化.$('[data-toggle="tooltip"]').tooltip();
<a data-toggle="tooltip" class="btn btn-default" title="aaaa" data-placement="bottom">bbbb</a> <script src="Scripts/jquery-1.9.1.js"></script> <script src="Scripts/bootstrap.js"></script> <script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script>
彈出框
源文件：popover.js
彈出框其實就是一種特殊的提示框，相比來說只是多了一個title標題而已
使用
（彈出框插件的用法和提示框組件幾乎一模一樣），唯一不一樣的就是插件名稱以及多余的content字段。而關於自動初始化，也和提示框插件一樣，需要手動初始化
- 指定的data-toggle="popover"屬性
- 然后再定義要顯示的標題,可以在title也可以用data-original-title
- 定義內容，可以在content也可以data-content
- js初始化.$('[data-toggle=popover]').popover();
<a data-toggle="popover" class="btn btn-default" title="aaaa" data-content="ccccc" data-placement="bottom">bbbb</a>
警告框
源文件：alert.js
就是在警告框組件的基礎上，提供了 單擊x號關閉警告框的功能
使用
<div class="alert alert-danger"> <h3>警告標題</h3> <hr /> <p>警告內容警告內容</p> <p> <button class="btn btn-default" data-dismiss="alert">關閉</button> </p> </div>
默認情況下，如果不設置data-target屬性，則會關閉x號按鈕元素所在的父元素容器，即外部的div元素。只需要保證設置了data-dismiss="alert"即可.
按鈕
源文件：button.js
按鈕插件提供了一組可以控制按鈕多種狀態的功能，比如，一個按鈕有禁用狀態、正在加載狀態、正常狀態等
使用
禁用狀態在這里不再贅述。
正在加載和加載完成控制與顯示
<a id="aa" href="#" class="btn btn-default" data-loading-text="正在加載..." data-complete-text="已完成">提交</a> $('#aa').dblclick(function() { $('#aa').button('loading'); setTimeout(function () { $('#aa').button('complete'); }, 2000); }); $('#aa').click(function() { $('#aa').button('reset'); });
折疊
源文件：collapse.js
當單擊一個觸發元素時，在另外一個可折疊區域進行顯示（或隱藏），再次單擊時可以反轉顯示狀態。（經典的手風琴風格）
使用
<!-- 默認顯示折疊區域-->
<a class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發改變</a>
<div id="demo" class="collapse in">折疊區域...</div>
<!-- 默認隱藏折疊區域-->
<button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按鈕</button>
<div id="demo" class="collapse ">折疊區域...</div>
輪播
源文件：carousel.js
旋轉輪播（Carousel）這個插件有很多種譯法，有人叫輪播，有人叫傳送帶
<div data-ride="carousel" class="carousel slide" id="carousel-container">
<!-- 圖片容器 -->
<div class="carousel-inner">
<div class="item">
<img alt="第一張圖" src="A" />
</div>
<div class="item active">
<img alt="第二張圖" src="B" />
</div>
<div class="item">
<img alt="第三張圖" src="C" />
</div>
</div>
<!-- 圓圈指示符 -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-container"></li>
<li data-slide-to="1" data-target="#carousel-container"></li>
<li data-slide-to="2" data-target="#carousel-container" class="active"></li>
</ol>
<!-- 左右控制按鈕 -->
<a data-slide="prev" href="#carousel-container" class="left carouselcontrol"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
<a data-slide="next" href="#carousel-container" class="right carouselcontrol"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
帶有data-ride="carousel"的div就是輪播插件的容器，容器id為carousel-container，稍后會用到。
還有兩個樣式，其中carousel樣式做樣式容器，而slide樣式和fade類似，用來定義輪播圖片的時候是否有特效.
- carousel-inner樣式div內部包含多個含有item的div樣式，在 這些內部的div里，定義我們要顯示的幻燈圖片。
- carousel-indicators樣式ol內部定義了一組標示符，用戶單 擊這些標示符可以直接顯示相應的圖片,data-slide-to是索引,從0開始.
- 另外兩個a鏈接是一組，用於顯示左右箭頭，可以改變輪播的方向。這兩個元素上定義的data-slide屬性值只能是 prev或者next
針對圖片，輪播插件還提供了一個字幕說明樣式（carousel-caption），緊接着img元素定義即可。示例如下
<div class="item active"> <img src="..." alt="..." /> <div class="carousel-caption"> <h3>標題</h3> <p>描述...</p> </div> </div>
定位浮標
源文件：affix.js
Affix的效果就像其官方網站左邊的導航鏈接一樣。
<!—或者分開設置offset -- >
<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >導航內容 </div>
<!—合並設置offset -- >
<div data-spy="affix" data-offset="60" >導航內容</div>
data-offset-top表示一個完整的新網頁，從頂部向下拖動滾動條（也就是網頁向上滾動）這個像素以后,
而data-offset-bottom則表示距離最底部還有多少距離（本例60像素）以后，就要開始繼續滾動了.