1、導入JavaScript插件
Bootstrap除了包含豐富的Web元件之外，如前面介紹的下拉菜單、按鈕組、導航、分頁等。他還包括一些JavaScript的插件。
Bootstrap的JavaScript插件可以單獨導入到頁面中，也可以一次性導入到頁面中。因為在Bootstrap中的JavaScript插件都是依賴于jQuery庫，是以不論是單獨導入還一次性導入之前必須先導入jQuery庫。
2、動畫過渡（Transitions）
transition.js檔案為Bootstrap具有過渡動畫效果的元件提供了動畫過渡效果。不過需要注意的是，這些過渡動畫都是采用CSS3來實作的，是以IE6-8浏覽器是不具備這些過渡動畫效果。
預設情況之下，Bootstrap架構中以下元件使用了過渡動畫效果：
☑ 模态彈出窗（Modal）的滑動和漸變效果；
☑ 頁籤（Tab）的漸變效果；
☑ 警告框（Alert）的漸變效果；
☑ 圖檔輪播（Carousel）的滑動效果。
3、模态彈出框（Modals）
在 Bootstrap 架構中把模态彈出框統一稱為 Modal。這種彈出框效果在大多數 Web 網站的互動中都可見。比如點選一個按鈕彈出一個框，彈出的框可能是一段檔案描述，也可能帶有按鈕操作，也有可能彈出的是一張圖檔。
4、模态彈出框--結構分析
Bootstrap架構中的模态彈出框，分别運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的内容都放置在“modal-content”中，其主要又包括三個部分：
☑ 彈出框頭部，一般使用“modal-header”表示，主要包括标題和關閉按鈕
☑ 彈出框主體，一般使用“modal-body”表示，彈出框的主要内容
☑ 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕
模态彈出窗的結構如下：
5、模态彈出框--實作原了解析（一）
實作原了解析：
bootstrap中的“模态彈出框”有以下幾個特點：
1）模态彈出窗是固定在浏覽器中的。
2）單擊右側全屏按鈕，在全屏狀态下，模态彈出窗寬度是自适應的，而且modal-dialog水準居中。
3）當浏覽器視窗大于768px時，模态彈出窗的寬度為600px。
6、模态彈出框--實作原了解析（二）
蒙闆樣式實作：
大家或許注意到了，在做模态彈出窗時，底部常常會有一個透明的黑色蒙層效果，在Bootstrap架構中為模态彈出窗也添加了一個這樣的蒙層樣式“modal-backdrop”，隻不過他預設情況下是全屏黑色的。同樣，給其添加了一個過渡動畫，從fade到in，把opacity值從0變成了0.5。
兩種尺寸選擇：
除此之外，Bootstrap架構還為模态彈出窗提供了不同尺寸，一個是大尺寸樣式“modal-lg”，另一個是小尺寸樣式“modal-sm”。
modal-backdrop是通過js插入body裡的。
7、模态彈出框--觸發模态彈出窗2種方法
衆所周知，模态彈出窗在頁面加載完成時，是被隐藏在頁面中的，隻有通過一定的動作（事件）才能觸發模态彈出窗的顯示。在Bootstrap架構中實作方法有2種，接下來分别來介紹這2種觸發模态彈出窗的使用方法。
聲明式觸發方法：
方法一：模态彈出窗聲明，隻需要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""）。例如：
注意以下事項：
1）data-toggle必須設定為modal(toggle中文翻譯過來就是觸發器)；
2）data-target可以設定為CSS的選擇符，也可以設定為模态彈出窗的ID值，一般情況設定為模态彈出窗的ID值，因為ID值是唯一的值。
方法二：觸發模态彈出窗也可以是一個連結<a>元素，那麼可以使用連結元素自帶的href屬性替代data-target屬性，如：
不過建議還是使用統一使用data-target的方式來觸發。
8、模态彈出框--為彈出框增加過度動畫效果
為模态彈出框增加過度動畫效果：
可通過給“.modal”增加類名“fade”為模态彈出框增加一個過渡動畫效果。
9、模态彈出框--模态彈出窗的使用（data-參數說明）
除了通過data-toggle和data-target來控制模态彈出窗之外，Bootstrap架構針對模态彈出框還提供了其他自定義data-屬性，來控制模态彈出窗。比如說:是否有灰色背景modal-backdrop，是否可以按ESC鍵關閉模态彈出窗。有關于Modal彈出窗自定義屬性相關說明如下所示：
data-show="false" 初始化頁面時，第一次點選無效，第二次點選彈出視窗。這些元素是定義在button上的。
10、模态彈出框--模态彈出窗的使用（JavaScript觸發）
JavaScript觸發方法
除了使用自定義屬性觸發模态彈出框之外，還可以通過JavaScript方法來觸發模态彈出窗。通過給一個元素一個事件，來觸發。比如說給一個按鈕一個單擊事件，然後觸發模态彈出窗。如下面的一個簡單示例：
JavaScript觸發的彈出窗代碼：
11、模态彈出框--JavaScript觸發時的參數設定（一）
使用JavaScript觸發模态彈出窗時，Bootstrap架構提供了一些設定，主要包括屬性設定、參數設定和事件設定。
屬性設定
模态彈出窗預設支援的自定義屬性主要有：
比如你不想讓使用者按ESC鍵關閉模态彈出窗，你就可以這樣做：
12、模态彈出框--JavaScript觸發時的參數設定（二）
參數設定：
在Bootstrap架構中還為模态彈出窗提供了三種參數設定，具體說明如下：
參數
使用方法
描述
toggle
$(“#mymodal”).modal(“toggle”)
觸發時，反轉模态彈出窗的狀态。如果模态彈出窗是顯示的，則關閉；反之，如果模态彈出窗是關閉的，則顯示
show
$(“#mymodal”).modal(“show”)
觸發時，顯示模态彈出窗
hide
$(“#mymodal”).modal(“hide”)
觸發時，關閉模态彈出窗
事件設定：
模态彈出窗還支援四種類型的事件，分别是模态彈出窗的彈出前、彈出後，關閉前、關閉後，具體描述如下：
事件類型
show.bs.modal
在show方法調用時立即觸發（尚未顯示之前）；如果單擊了一個元素，那麼該元素将作為事件的relatedTarget屬性
shown.bs.modal
該事件在模态彈出窗完全顯示給使用者之後（并且等CSS動畫完成之後）觸發；如果單擊了一個元素，那麼該元素将作為事件的relatedTarget事件
hide.bs.modal
在hide方法調用時（但還未關閉隐藏）立即觸發
hidden.bs.modal
該事件在模态彈出窗完全隐藏之後（并且CSS動畫漂完成之後）觸發
調用方法也非常簡單：
連結
GitHub:mazeyqian
Blog:blog.mazey.net