[1]導入 [2]data屬性 [3]API [4]過渡效果 ...
前面的話
Bootstrap除了包含豐富的Web組件之外，如下拉菜單、按鈕組、導航、分頁等，還包括一些JavaScript的插件。插件為 Bootstrap 的組件賦予了“生命”。Bootstrap的JavaScript插件可以單獨導入到頁面中，也可以一次性導入到頁面中。因為在Bootstrap中的JavaScript插件都是依賴於jQuery庫，所以不論是單獨導入還一次性導入之前必須先導入jQuery庫。本文將介紹Bootstrap插件概述
導入
【一次性導入】
Bootstrap提供了一個單一的文件，這個文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（壓縮版本：bootstrap.min.js）
【單獨導入】
為方便單獨導入特效文件，Bootstrap提供了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”
data屬性
可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是首選方式。
話又說回來，在某些情況下可能需要將此功能關閉。因此，還提供了關閉 data 屬性 API 的方法，即解除以 data-api 為命名空間並綁定在文檔上的事件。就像下麵這樣：
$(document).off('.data-api')
另外，如果是針對某個特定的插件，只需在 data-api 前面添加那個插件的名稱作為命名空間，如下：
$(document).off('.alert.data-api')
API
Bootstrap為所有插件提供了純 JavaScript 方式的 API。所有公開的 API 都是支持單獨或鏈式調用方式，並且返回其所操作的元素集合，和jQuery的調用形式一致
$('.btn.danger').button('toggle').addClass('fat')
所有方法都可以接受一個可選的 option 對象作為參數，或者一個代表特定方法的字元串，或者什麼也不提供（在這種情況下，插件將會以預設值初始化）
$('#myModal').modal() // 以預設值初始化
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // 初始化後立即調用 show 方法
每個插件還通過 Constructor 屬性暴露了其原始的構造函數：$.fn.popover.Constructor。如果想獲取某個插件的實例，可以直接通過頁面元素獲取：$('[rel="popover"]').data('popover')
【預設設置】
每個插件都可以通過修改其自身的 Constructor.DEFAULTS 對象從而改變插件的預設設置：
$.fn.modal.Constructor.DEFAULTS.keyboard = false // 將模態框插件的 `keyboard` 預設選參數置為 false
【避免命名空間衝突】
某些時候可能需要將 Bootstrap 插件與其他 UI 框架共同使用。在這種情況下，命名空間衝突隨時可能發生。如果不幸發生了這種情況，可以通過調用插件的 .noConflict 方法恢復其原始值
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
【事件】
Bootstrap 為大部分插件所具有的動作提供了自定義事件。一般來說，這些事件都有不定式和過去式兩種動詞的命名形式，例如，不定式形式的動詞（例如 show）表示其在事件開始時被觸發；而過去式動詞(如shown)表示在動作執行完畢之後被觸發。
所有 Bootstrap 事件的名稱都採用命名空間方式。所有以不定式形式的動詞命名的事件都提供了 preventDefault 功能。這就賦予在動作開始執行前將其停止的能力
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // 阻止模態框的展示
})
過渡效果
Bootstrap框架預設給各個組件提供了基本動畫的過渡效果，如果要使用，有兩種方法：
☑ 調用統一編譯的bootstrap.js；
☑ 調用單一的過渡動畫的JavaScript插件文件transition.js
transition.js文件為Bootstrap具有過渡動畫效果的組件提供了動畫過渡效果。不過需要註意的是，這些過渡動畫都是採用CSS3來實現的，所以IE6-8瀏覽器是不具備這些過渡動畫效果
預設情況之下，Bootstrap框架中以下組件使用了過渡動畫效果：
☑ 模態彈出窗（Modal）的滑動和漸變效果；
☑ 選項卡（Tab）的漸變效果；
☑ 警告框（Alert）的漸變效果；
☑ 圖片輪播（Carousel）的滑動效果
transition.js 是針對 transitionEnd 事件的一個基本輔助工具，也是對 CSS 過渡效果的模擬。它被其它插件用來檢測當前瀏覽器對是否支持 CSS 的過渡效果
通過下麵的代碼可以在全局範圍禁用過渡效果，並且必須將此代碼放在transition.js(或bootstrap.js或bootstrap.min.js)後面，確保在js文件載入完畢後再執行下麵代碼
$.support.transition = false
