Bootstrap除了包含豐富的Web組件之外，如前面介紹的下拉菜單、按鈕組、導(dǎo)航、分頁等。他還包括一些Javascript的插件。
Bootstrap的JavaScript插件可以單獨(dú)導(dǎo)入到頁面中，也可以一次性導(dǎo)入到頁面中。因?yàn)?strong>在Bootstrap中的JavaScript插件都是依賴于jQuery庫，所以不論是單獨(dú)導(dǎo)入還一次性導(dǎo)入之前必須先導(dǎo)入jQuery庫。
一次性導(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版本。
單獨(dú)導(dǎo)入：
為方便單獨(dú)導(dǎo)入特效文件，Bootstrap V3.2中提供了12種JavaScript插件，他們分別是：
? 動(dòng)畫過渡（Transitions）:對應(yīng)的插件文件“transition.js”
? 模態(tài)彈窗（Modal）:對應(yīng)的插件文件“modal.js”
? 下拉菜單（Dropdown）：對應(yīng)的插件文件“dropdown.js”
? 滾動(dòng)偵測（Scrollspy）：對應(yīng)的插件文件“scrollspy.js”
? 選項(xiàng)卡（Tab）：對應(yīng)的插件文件“tab.js”
? 提示框（Tooltips）：對應(yīng)的插件文件“tooltop.js”
? 彈出框（Popover）：對應(yīng)的插件文件“popover.js”
? 警告框（Alert）：對應(yīng)的插件文件“alert.js”
? 按鈕（Buttons）：對應(yīng)的插件文件“button.js”
? 折疊/手風(fēng)琴（Collapse）：對應(yīng)的插件文件“collapse.js”
? 圖片輪播Carousel：對應(yīng)的插件文件“carousel.js”
? 自動(dòng)定位浮標(biāo)Affix：對應(yīng)的插件文件“affix.js”
上述單獨(dú)插件的下載可到github去下載（https://github.com/twbs/bootstrap）。
下載后可查看js文件夾，如下圖：
接下來依次向大家介紹這些插件如何使用，至于插件源碼分析，在本系列不做過多的闡述，具體源碼可以閱讀各插件的代碼。
注意：在后面的例子中我們?yōu)榱朔奖愣疾捎靡淮涡詫?dǎo)入的方法，即引入“bootstrap.min.js”文件（小伙伴們可以在自己的項(xiàng)目中跟據(jù)需要選擇單獨(dú)導(dǎo)入還是一次性導(dǎo)入）。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>導(dǎo)入JavaScript插件</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/CSS/bootstrap.min.css"></head><body><button class="btn btn-PRimary" type="button">點(diǎn)擊我</button><div class="modal" id="mymodal"> <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 --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });</script></body></html>動(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（右側(cè)第29行引入Bootstrap上對外公布的transition.js的地址）。
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)效果。
舉一個(gè)“模態(tài)彈出窗（Modal）的滑動(dòng)和漸變效果”源代碼例子。
!DOCTYPE html><html><head><meta charset="utf-8"><title>導(dǎo)入JavaScript插件</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><button class="btn btn-primary" type="button">點(diǎn)擊我</button><div class="modal fade" id="mymodal"> <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 --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script><script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script><script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });</script></body></html>模態(tài)彈出框（Modals）
這一小節(jié)我們先來講解一個(gè)“模態(tài)彈出框”，插件的源文件：modal.js。
右側(cè)代碼編輯器（30行）就是單獨(dú)引入 bootstrap 中發(fā)布出的“modal.js”文件。
樣式代碼：
? LESS版本：modals.less
? Sass版本：_modals.scss
? 編譯后的Bootstrap：對應(yīng)bootstrap.css文件第5375行～第5496行
在 Bootstrap 框架中把模態(tài)彈出框統(tǒng)一稱為 Modal。這種彈出框效果在大多數(shù) Web 網(wǎng)站的交互中都可見。比如點(diǎn)擊一個(gè)按鈕彈出一個(gè)框，彈出的框可能是一段文件描述，也可能帶有按鈕操作，也有可能彈出的是一張圖片。如下圖所示：
<html><head><meta charset="utf-8"><title>導(dǎo)入JavaScript插件</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><button class="btn btn-primary" type="button">點(diǎn)擊我</button><div class="modal" id="mymodal"> <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 --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script><script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script><script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });</script></body></html>模態(tài)彈出框--結(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”表示，主要放置操作按鈕
如下圖所示：
模態(tài)彈出窗的結(jié)構(gòu)如下：
<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 -->彈出窗的主體樣式實(shí)現(xiàn)：
但是對于一個(gè)模態(tài)彈出窗而言，modal-content才是樣式的關(guān)鍵。其主要設(shè)置了彈出窗的邊框、邊距、背景色和陰影等樣式。
/*bootstrap.css文件第5412行～第5423行*/.modal-content { position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5);}除此之外，modal-content中的modal-header、modal-body和modal-footer三個(gè)部分樣式設(shè)置：
/*bootstrap.css文件第5441行～第5461行*/.modal-header { min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #e5e5e5;}.modal-header .close { margin-top: -2px;}.modal-title { margin: 0; line-height: 1.42857143;}.modal-body { position: relative; padding: 15px;}.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5;}這三個(gè)部分主要控制一些間距的樣式。而modal-footer都是用來放置按鈕，所以底部還對包含的按鈕做了一定的樣式處理。
/*bootstrap.css文件第5462行～第5471行*/.modal-footer .btn + .btn { margin-bottom: 0; margin-left: 5px;}.modal-footer .btn-group .btn + .btn { margin-left: -1px;}.modal-footer .btn-block + .btn-block { margin-left: 0;}<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>結(jié)構(gòu)分析</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><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 --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>模態(tài)彈出框--實(shí)現(xiàn)原理解析（一）
實(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)：
/*bootstrap.css文件第5379行～第5389行*/.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0;}水平居中(源代碼)實(shí)現(xiàn)：
/*bootstrap.css文件第5407行～第5411行*/.modal-dialog { position: relative; width: auto; margin: 10px;}當(dāng)瀏覽器視窗大于768px時(shí)，模態(tài)彈出窗的寬度為600px（源代碼）實(shí)現(xiàn)：
/*bootstrap.css文件第5479行～第5491行*/@media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); } .modal-sm { width: 300px; }}<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>實(shí)現(xiàn)原理解析（一）</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發(fā)</button><!-- 模態(tài)彈出窗內(nèi)容 --><div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <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> </div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>模態(tài)彈出框--實(shí)現(xiàn)原理解析（二）
蒙板樣式實(shí)現(xiàn)：
大家或許注意到了，在做模態(tài)彈出窗時(shí)，底部常常會(huì)有一個(gè)透明的黑色蒙層效果，如下圖所示：
在Bootstrap框架中為模態(tài)彈出窗也添加了一個(gè)這樣的蒙層樣式“modal-backdrop”，只不過他默認(rèn)情況下是全屏黑色的：
/*bootstrap.css文件第5424行～第5432行*/.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000;}同樣，給其添加了一個(gè)過渡動(dòng)畫，從fade到in，把opacity值從0變成了0.5。上圖展示的就是in狀態(tài)下的效果：
/*bootstrap.css文件第5433行～第5440行*/.modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0;}.modal-backdrop.in { filter: alpha(opacity=50); opacity: .5;}兩種尺寸選擇：
除此之外，Bootstrap框架還為模態(tài)彈出窗提供了不同尺寸，一個(gè)是大尺寸樣式“modal-lg”，另一個(gè)是小尺寸樣式“modal-sm”。其結(jié)構(gòu)上稍做調(diào)整：
<!-- 大尺寸模態(tài)彈出窗 --><div class="modal fade bs-example-modal-lg" tabindex="-1"role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <divclass="modal-dialog modal-lg"> <divclass="modal-content"> ... </div> </div></div><!-- 小尺寸模態(tài)彈出窗 --><divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <divclass="modal-dialog modal-sm"> <divclass="modal-content">...</div> </div></div>來簡單的看一個(gè)示例效果：
對于這兩種尺寸的模態(tài)彈出窗，Bootstrap在媒體查詢中做過處理：代碼同上見bootstrap.css
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>模態(tài)彈出框--實(shí)現(xiàn)原理解析（二）</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><h3>大/小尺寸模態(tài)彈出框</h3><!-- Large modal --><button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大的模態(tài)彈出窗</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <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> </div></div><!-- Small modal --><button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小的模態(tài)彈出窗</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <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> </div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>模態(tài)彈出框--觸發(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>不過建議還是使用統(tǒng)一使用data-target的方式來觸發(fā)。
點(diǎn)擊按鈕就能觸發(fā)彈出窗：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>模態(tài)彈出窗的使用</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!--下面是代碼任務(wù)部分--><!-- href觸發(fā)模態(tài)彈出窗元素 --><a class="btn btn-primary">通過鏈接href屬性觸發(fā)</a><!-- 模態(tài)彈出窗內(nèi)容 --><div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link"> <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> </div></div><!-- data-target觸發(fā)模態(tài)彈出窗元素 --><button class="btn btn-primary" type="button">通過data-target觸發(fā)</button><!-- 模態(tài)彈出窗內(nèi)容 --><div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <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> </div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>模態(tài)彈出框--為彈出框增加過度動(dòng)畫效果
為模態(tài)彈出框增加過度動(dòng)畫效果：
可通過給“.modal”增加類名“fade”為模態(tài)彈出框增加一個(gè)過渡動(dòng)畫效果。
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小的模態(tài)彈出窗</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <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> </div></div>源代碼實(shí)現(xiàn)：
/*bootstrap.css文件第5390行～第5402行*/.modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate3d(0, -25%, 0); -o-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0);}.modal.in .modal-dialog { -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>模態(tài)彈出窗的使用</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!-- data-target觸發(fā)模態(tài)彈出窗元素 --><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發(fā)</button><!-- 模態(tài)彈出窗內(nèi)容 --><div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <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> </div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>模態(tài)彈出框--模態(tài)彈出窗的使用（data-參數(shù)說明）
除了通過data-toggle和data-target來控制模態(tài)彈出窗之外，Bootstrap框架針對模態(tài)彈出框還提供了其他自定義data-屬性，來控制模態(tài)彈出窗。比如說:是否有灰色背景modal-backdrop，是否可以按ESC鍵關(guān)閉模態(tài)彈出窗。有關(guān)于Modal彈出窗自定義屬性相關(guān)說明如下所示：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>模態(tài)彈出窗的使用</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!-- data-target觸發(fā)模態(tài)彈出窗元素 --><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發(fā)</button><!-- 模態(tài)彈出窗內(nèi)容 --><div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <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> </div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>模態(tài)彈出框--模態(tài)彈出窗的使用（JavaScript觸發(fā)）
JavaScript觸發(fā)方法
除了使用自定義屬性觸發(fā)模態(tài)彈出框之外，還可以通過JavaScript方法來觸發(fā)模態(tài)彈出窗。通過給一個(gè)元素一個(gè)事件，來觸發(fā)。比如說給一個(gè)按鈕一個(gè)單擊事件，然后觸發(fā)模態(tài)彈出窗。如下面的一個(gè)簡單示例：
<!-- 觸發(fā)模態(tài)彈出窗元素 --><button class="btn btn-primary" type="button">點(diǎn)擊我</button><!-- 模態(tài)彈出窗內(nèi)容 --><div class="modal" id="mymodal"> <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 -->JavaScript觸發(fā)的彈出窗代碼：
$(function(){ $(".btn").click(function(){ $("#mymodal").modal(); });});運(yùn)行效果如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>模態(tài)彈出窗的使用（三）</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!--下面是代碼任務(wù)部分---><button class="btn btn-primary" type="button">點(diǎn)擊我</button><div class="modal" id="themodal" tabindex="-1"> <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 --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>模態(tài)彈出框--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 }); });});這一節(jié)，我們對JavaScript觸發(fā)模態(tài)彈出窗的屬性設(shè)置進(jìn)行了介紹，下一節(jié)我們將繼續(xù)對參數(shù)設(shè)置和事件設(shè)置進(jìn)行介紹。
模態(tài)彈出框--JavaScript觸發(fā)時(shí)的參數(shù)設(shè)置（二）
上一節(jié)，我們對JavaScript觸發(fā)模態(tài)彈出窗的屬性設(shè)置進(jìn)行了介紹，現(xiàn)在我們接著對參數(shù)設(shè)置和事件設(shè)置進(jìn)行介紹。
參數(shù)設(shè)置：
在Bootstrap框架中還為模態(tài)彈出窗提供了三種參數(shù)設(shè)置，具體說明如下：
參數(shù) | 使用方法 | 描述 |
toggle | $(“#mymodal”).modal(“toggle”) | 觸發(fā)時(shí)，反轉(zhuǎn)模態(tài)彈出窗的狀態(tài)。如果模態(tài)彈出窗是顯示的，則關(guān)閉；反之，如果模態(tài)彈出窗是關(guān)閉的，則顯示 |
show | $(“#mymodal”).modal(“show”) | 觸發(fā)時(shí)，顯示模態(tài)彈出窗 |
hide | $(“#mymodal”).modal(“hide”) | 觸發(fā)時(shí)，關(guān)閉模態(tài)彈出窗 |
事件設(shè)置：
模態(tài)彈出窗還支持四種類型的事件，分別是模態(tài)彈出窗的彈出前、彈出后，關(guān)閉前、關(guān)閉后，具體描述如下：
事件類型 | 描述 |
show.bs.modal | 在show方法調(diào)用時(shí)立即觸發(fā)（尚未顯示之前）；如果單擊了一個(gè)元素，那么該元素將作為事件的relatedTarget屬性 |
shown.bs.modal | 該事件在模態(tài)彈出窗完全顯示給用戶之后（并且等CSS動(dòng)畫完成之后）觸發(fā)；如果單擊了一個(gè)元素，那么該元素將作為事件的relatedTarget事件 |
hide.bs.modal | 在hide方法調(diào)用時(shí)（但還未關(guān)閉隱藏）立即觸發(fā) |
hidden.bs.modal | 該事件在模態(tài)彈出窗完全隱藏之后（并且CSS動(dòng)畫漂完成之后）觸發(fā) |
調(diào)用方法也非常簡單：
$('#myModal').on('hidden.bs.modal', function (e) { // 處理代碼...})<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript觸發(fā)時(shí)的參數(shù)設(shè)置（二）</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><button class="btn btn-primary" type="button">點(diǎn)擊我</button><div class="modal" id="mymodal"> <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 --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });</script></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
