JavaScript插件的概述
引用JavaScript插件后可以套用通用的HTML格式就能實現酷炫的交互特效
JavaScript插件是依托在jQuery10+的基礎上,所以要使用它前提是必須先引入jQuery庫
JavaScript插件總共有12種，過渡效果、模態框、下拉菜單、滾動監聽、輪播圖、按鈕等
JavaScript插件的引入方式
一次性全部引入（使用 bootstrap.js 或壓縮版的 bootstrap.min.js）
JavaScript 插件可以單個引入
data屬性
data屬性API是Bootstrap中的一等API，你可以僅僅通過data屬性API就能使用所有的Bootstrap插件，無需寫一行Javascript代碼。這是首選的使用方式
關閉 data 屬性 API 的方法
$(document).off('.data-api')
動畫過渡效果
可以單獨引入transition.js
過渡效果全部使用了css3語法，IE6-IE8不支持動畫過渡效果
組件使用動畫過渡效果
模態框（Modal）的滑動和漸變效果
選項卡（Tab）的漸變效果
警告框（Alert）的漸變效果
旋轉輪播（Carousel）的滑動效果
9.4.1.模態框插件制作彈出的對話框
模態框經過了優化，更加靈活，以彈出對話框的形式出現，具有最小和最實用的功能集。
用法
通過 data 屬性或 JavaScript 調用模態框插件，可以根據需要動態展示隱藏的內容。模態框彈出時還會為 <body> 元素添加 .modal-open 類，從而覆蓋頁面默認的滾動行為，并且還會自動生成一個 .modal-backdrop 元素用于提供一個可點擊的區域，點擊此區域就即可關閉模態框。
通過 data 屬性
不需寫 JavaScript 代碼也可激活模態框。通過在一個起控制器作用的元素（例如：按鈕）上添加 data-toggle="modal" 屬性，或者 data-target="#foo" 屬性，再或者 href="#foo" 屬性，用于指向被控制的模態框。
9.4.2.選項卡插件制作頁面的選項卡
選項卡（Tab）組件
它是Bootstrap提供的一種非常常用的功能和平時使用的Windows操作系統里的選項卡設置一樣，單擊一個選項，下面就顯示對應的選項卡面板
選項卡有兩部分組成，CSS選項卡組件+底部可以切換的選項卡面板
選項卡導航和選項卡面板要同時有
導航鏈接里要設置data-toggle="tab"，并且還要設置data-target或是href="選擇符"，以便單擊的時候能找到該選擇符所對應的tab-pane面板
tab-pane要放在tab-content里面，要有id且值必須和data-target的值或href的值相同
9.4.3.輪播圖插件制作頁面的輪播圖
旋轉輪播（Carousel）
又叫做輪播圖或焦點圖
其主要顯示效果就像各大網站的多幅滾動的廣告一樣，比如京東首頁的大圖片
默認情況下是循環向左輪播，如果單擊某個小圓點時，會直接顯示單擊的那張圖
輪播圖是Bootstrap插件中聲明用法相對復雜的一個，所以先理解它的HTML結構
9.4.4.滾動監聽插件給網頁元素添加監聽
滾動監聽(ScrollSpy)插件是根據滾動的位置自動更新導航條中相應的導航項
滾動監聽兩種用法
對一個固定高度的元素進行滾動監聽，然后對相應的菜單進行高亮顯示
對整個頁面（body）進行滾動監聽