如何導(dǎo)入JavaScript插件漾月？
Bootstrap的JavaScript插件可以單獨(dú)導(dǎo)入到頁面中楚里，也可以一次性導(dǎo)入到頁面中炭菌。因?yàn)樵贐ootstrap中的JavaScript插件都是依賴于jQuery庫姆怪，所以不論是單獨(dú)導(dǎo)入還一次性導(dǎo)入之前必須先導(dǎo)入jQuery庫。
（1）一次性導(dǎo)入：
Bootstrap提供了一個(gè)單一的文件夹厌，這個(gè)文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（壓縮版本：bootstrap.min.js）裆悄。
具體使用如下（或見右側(cè)代碼編輯器28-29行）：
<!—導(dǎo)入jQuery版本庫矛纹，因?yàn)锽ootstrap的JavaScript插件依賴于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性導(dǎo)入所有Bootstrap的JavaScript插件（壓縮版本） -->
<script src="js/bootstrap.min.js"></script>
特別聲明：jQuery版本庫也可以加載本地的jQuery版本。
（2）單獨(dú)導(dǎo)入：
為方便單獨(dú)導(dǎo)入特效文件光稼，Bootstrap V3.2中提供了12種JavaScript插件或南，他們分別是：
? 動(dòng)畫過渡（Transitions）:對(duì)應(yīng)的插件文件“transition.js”
? 模態(tài)彈窗（Modal）:對(duì)應(yīng)的插件文件“modal.js”
? 下拉菜單（Dropdown）：對(duì)應(yīng)的插件文件“dropdown.js”
? 滾動(dòng)偵測（Scrollspy）：對(duì)應(yīng)的插件文件“scrollspy.js”
? 選項(xiàng)卡（Tab）：對(duì)應(yīng)的插件文件“tab.js”
? 提示框（Tooltips）：對(duì)應(yīng)的插件文件“tooltop.js”
? 彈出框（Popover）：對(duì)應(yīng)的插件文件“popover.js”
? 警告框（Alert）：對(duì)應(yīng)的插件文件“alert.js”
? 按鈕（Buttons）：對(duì)應(yīng)的插件文件“button.js”
? 折疊/手風(fēng)琴（Collapse）：對(duì)應(yīng)的插件文件“collapse.js”
? 圖片輪播Carousel：對(duì)應(yīng)的插件文件“carousel.js”
? 自動(dòng)定位浮標(biāo)Affix：對(duì)應(yīng)的插件文件“affix.js”
上述單獨(dú)插件的下載可到github去下載（https://github.com/twbs/bootstrap）。
第1章 動(dòng)畫過渡（Transitions）
這一小節(jié)我們先來講“動(dòng)畫過渡（Transitions）”這個(gè)插件的使用艾君，源文件：transition.js
Bootstrap框架默認(rèn)給各個(gè)組件提供了基本動(dòng)畫的過渡效果采够，如果要使用，有兩種方法：
? 調(diào)用統(tǒng)一編譯的bootstrap.js腻贰；
? 調(diào)用單一的過渡動(dòng)畫的JavaScript插件文件transition.js吁恍。
/*Bootstrap上對(duì)外公布的transition.js的地址*/
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
transition.js文件為Bootstrap具有過渡動(dòng)畫效果的組件提供了動(dòng)畫過渡效果。不過需要注意的是播演，這些過渡動(dòng)畫都是采用CSS3來實(shí)現(xiàn)的冀瓦，所以IE6-8瀏覽器是不具備這些過渡動(dòng)畫效果。
默認(rèn)情況之下写烤，Bootstrap框架中以下組件使用了過渡動(dòng)畫效果：
模態(tài)彈出窗（Modal）的滑動(dòng)和漸變效果翼闽；
選項(xiàng)卡（Tab）的漸變效果；
警告框（Alert）的漸變效果洲炊；
圖片輪播（Carousel）的滑動(dòng)效果感局。
第2章 模態(tài)彈出框（Modals）
插件的源文件：modal.js尼啡。
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
在 Bootstrap 框架中把模態(tài)彈出框統(tǒng)一稱為 Modal。這種彈出框效果在大多數(shù) Web 網(wǎng)站的交互中都可見询微。比如點(diǎn)擊一個(gè)按鈕彈出一個(gè)框崖瞭，彈出的框可能是一段文件描述，也可能帶有按鈕操作撑毛，也有可能彈出的是一張圖片书聚。如下圖所示：
（1）結(jié)構(gòu)分析
Bootstrap框架中的模態(tài)彈出框，分別運(yùn)用了“modal”藻雌、“modal-dialog”和“modal-content”樣式雌续，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個(gè)部分：
? 彈出框頭部胯杭，一般使用“modal-header”表示驯杜，主要包括標(biāo)題和關(guān)閉按鈕
? 彈出框主體，一般使用“modal-body”表示做个，彈出框的主要內(nèi)容
? 彈出框腳部鸽心，一般使用“modal-footer”表示，主要放置操作按鈕
對(duì)于一個(gè)模態(tài)彈出窗而言叁温，modal-content才是樣式的關(guān)鍵再悼。其主要設(shè)置了彈出窗的邊框、邊距膝但、背景色和陰影等樣式冲九。modal-content中的modal-header、modal-body和modal-footer三個(gè)部分樣式主要控制一些間距的樣式跟束。而modal-footer都是用來放置按鈕莺奸，所以底部還對(duì)包含的按鈕做了一定的樣式處理。
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模態(tài)彈出窗標(biāo)題</h4>
</div>
<div class="modal-body">
<p>模態(tài)彈出窗主體內(nèi)容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
（2）實(shí)現(xiàn)原理解析
bootstrap中的“模態(tài)彈出框”有以下幾個(gè)特點(diǎn)：
1冀宴、模態(tài)彈出窗是固定在瀏覽器中的灭贷。
2、單擊右側(cè)全屏按鈕略贮，在全屏狀態(tài)下甚疟，模態(tài)彈出窗寬度是自適應(yīng)的，而且modal-dialog水平居中逃延。
3览妖、當(dāng)瀏覽器視窗大于768px時(shí)，模態(tài)彈出窗的寬度為600px揽祥。
蒙板樣式實(shí)現(xiàn)：
大家或許注意到了讽膏，在做模態(tài)彈出窗時(shí)，底部常常會(huì)有一個(gè)透明的黑色蒙層效果拄丰，如下圖所示：
在Bootstrap框架中為模態(tài)彈出窗也添加了一個(gè)這樣的蒙層樣式“modal-backdrop”府树，只不過他默認(rèn)情況下是全屏黑色的俐末。同樣，給其添加了一個(gè)過渡動(dòng)畫奄侠，從fade到in卓箫，把opacity值從0變成了0.5。上圖展示的就是in狀態(tài)下的效果遭铺。
兩種尺寸選擇：
Bootstrap框架還為模態(tài)彈出窗提供了不同尺寸丽柿，一個(gè)是大尺寸樣式“modal-lg”，另一個(gè)是小尺寸樣式“modal-sm”魂挂。其結(jié)構(gòu)上稍做調(diào)整。
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-sm">
（3）觸發(fā)模態(tài)彈出窗2種方法
眾所周知馁筐，模態(tài)彈出窗在頁面加載完成時(shí)涂召，是被隱藏在頁面中的，只有通過一定的動(dòng)作（事件）才能觸發(fā)模態(tài)彈出窗的顯示敏沉。在Bootstrap框架中實(shí)現(xiàn)方法有2種果正，接下來分別來介紹這2種觸發(fā)模態(tài)彈出窗的使用方法。
聲明式觸發(fā)方法：
方法一：
模態(tài)彈出窗聲明盟迟，只需要自定義兩個(gè)必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發(fā)方法一般依賴于這些自定義的data-xxx 屬性秋泳。比如data-toggle="" 或者 data-dismiss=""）。例如：
<!-- 觸發(fā)模態(tài)彈出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點(diǎn)擊我會(huì)彈出模態(tài)彈出窗</button>
<!-- 模態(tài)彈出窗 -->
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模態(tài)彈出窗內(nèi)容 -->
</div>
</div>
</div>
注意以下事項(xiàng)：
1攒菠、data-toggle必須設(shè)置為modal(toggle中文翻譯過來就是觸發(fā)器)迫皱；
2、data-target可以設(shè)置為CSS的選擇符辖众，也可以設(shè)置為模態(tài)彈出窗的ID值卓起，一般情況設(shè)置為模態(tài)彈出窗的ID值，因?yàn)镮D值是唯一的值凹炸。
方法二：
觸發(fā)模態(tài)彈出窗也可以是一個(gè)鏈接<a>元素戏阅，那么可以使用鏈接元素自帶的href屬性替代data-target屬性，如：
<!-- 觸發(fā)模態(tài)彈出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點(diǎn)擊我會(huì)彈出模態(tài)彈出窗</a>
<!-- 模態(tài)彈出窗 -->
<div class="modal fade" id="mymodal" >
<div class="modal-dialog" >
<div class="modal-content" >
<!-- 模態(tài)彈出窗內(nèi)容 -->
</div>
</div>
</div>
（4）為彈出框增加過度動(dòng)畫效果
可通過給“.modal”增加類名“fade”為模態(tài)彈出框增加一個(gè)過渡動(dòng)畫效果啤它。
class="modal fade"
（5）模態(tài)彈出窗的使用
data-參數(shù)說明
除了通過data-toggle和data-target來控制模態(tài)彈出窗之外奕筐，Bootstrap框架針對(duì)模態(tài)彈出框還提供了其他自定義data-屬性，來控制模態(tài)彈出窗变骡。比如說:是否有灰色背景modal-backdrop离赫，是否可以按ESC鍵關(guān)閉模態(tài)彈出窗。有關(guān)于Modal彈出窗自定義屬性相關(guān)說明如下所示：
JavaScript觸發(fā)方法
除了使用自定義屬性觸發(fā)模態(tài)彈出框之外锣光，還可以通過JavaScript方法來觸發(fā)模態(tài)彈出窗笆怠。通過給一個(gè)元素一個(gè)事件，來觸發(fā)誊爹。比如說給一個(gè)按鈕一個(gè)單擊事件蹬刷，然后觸發(fā)模態(tài)彈出窗瓢捉。
<button class="btn btn-primary" type="button">點(diǎn)擊我</button>
<!-- 模態(tài)彈出窗內(nèi)容 -->
<div class="modal" id="mymodal">
JavaScript觸發(fā)的彈出窗代碼：
<script>
$(function(){
$(".btn").click(function(){
$("#themodal").modal();javascript:;
});
});
</script>
（6）JavaScript觸發(fā)時(shí)的參數(shù)設(shè)置
使用JavaScript觸發(fā)模態(tài)彈出窗時(shí)，Bootstrap框架提供了一些設(shè)置办成，主要包括屬性設(shè)置泡态、參數(shù)設(shè)置和事件設(shè)置。
-
屬性設(shè)置
模態(tài)彈出窗默認(rèn)支持的自定義屬性主要有：
比如你不想讓用戶按ESC鍵關(guān)閉模態(tài)彈出窗迂卢，你就可以這樣做：
$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false
});
});
});
-
參數(shù)設(shè)置：
在Bootstrap框架中還為模態(tài)彈出窗提供了三種參數(shù)設(shè)置某弦，具體說明如下：
-
事件設(shè)置：
模態(tài)彈出窗還支持四種類型的事件，分別是模態(tài)彈出窗的彈出前而克、彈出后靶壮，關(guān)閉前、關(guān)閉后员萍，具體描述如下：
調(diào)用方法也非常簡單：
$('#myModal').on('hidden.bs.modal', function (e) {
// 處理代碼...
})
