Bootstrap除了包含豐富的Web組件之外，如前面介紹的下拉菜單、按鈕組、導航、分頁等。他還包括一些Javascript的插件。
Bootstrap的JavaScript插件可以單獨導入到頁面中，也可以一次性導入到頁面中。因為在Bootstrap中的JavaScript插件都是依賴于jQuery庫，所以不論是單獨導入還一次性導入之前必須先導入jQuery庫。
一次性導入：
Bootstrap提供了一個單一的文件，這個文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（壓縮版本：bootstrap.min.js）。
具體使用如下（或見右側代碼編輯器28-29行）：
<!—導入jQuery版本庫，因為Bootstrap的JavaScript插件依賴于jQuery --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!—- 一次性導入所有Bootstrap的JavaScript插件（壓縮版本） --><script src="js/bootstrap.min.js"></script>特別聲明：jQuery版本庫也可以加載你本地的jQuery版本。
單獨導入：
為方便單獨導入特效文件，Bootstrap V3.2中提供了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”
上述單獨插件的下載可到github去下載（https://github.com/twbs/bootstrap）。
下載后可查看js文件夾，如下圖：
接下來依次向大家介紹這些插件如何使用，至于插件源碼分析，在本系列不做過多的闡述，具體源碼可以閱讀各插件的代碼。
注意：在后面的例子中我們為了方便都采用一次性導入的方法，即引入“bootstrap.min.js”文件（小伙伴們可以在自己的項目中跟據需要選擇單獨導入還是一次性導入）。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>導入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">點擊我</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>動畫過渡（Transitions）
這一小節我們先來講“動畫過渡（Transitions）”這個插件的使用，源文件：transition.js
Bootstrap框架默認給各個組件提供了基本動畫的過渡效果，如果要使用，有兩種方法：
? 調用統一編譯的bootstrap.js；
? 調用單一的過渡動畫的JavaScript插件文件transition.js（右側第29行引入Bootstrap上對外公布的transition.js的地址）。
transition.js文件為Bootstrap具有過渡動畫效果的組件提供了動畫過渡效果。不過需要注意的是，這些過渡動畫都是采用CSS3來實現的，所以IE6-8瀏覽器是不具備這些過渡動畫效果。
默認情況之下，Bootstrap框架中以下組件使用了過渡動畫效果：
? 模態彈出窗（Modal）的滑動和漸變效果；
? 選項卡（Tab）的漸變效果；
? 警告框（Alert）的漸變效果；
? 圖片輪播（Carousel）的滑動效果。
舉一個“模態彈出窗（Modal）的滑動和漸變效果”源代碼例子。
!DOCTYPE html><html><head><meta charset="utf-8"><title>導入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">點擊我</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框（Modals）
這一小節我們先來講解一個“模態彈出框”，插件的源文件：modal.js。
右側代碼編輯器（30行）就是單獨引入 bootstrap 中發布出的“modal.js”文件。
樣式代碼：
? LESS版本：modals.less
? Sass版本：_modals.scss
? 編譯后的Bootstrap：對應bootstrap.css文件第5375行～第5496行
在 Bootstrap 框架中把模態彈出框統一稱為 Modal。這種彈出框效果在大多數 Web 網站的交互中都可見。比如點擊一個按鈕彈出一個框，彈出的框可能是一段文件描述，也可能帶有按鈕操作，也有可能彈出的是一張圖片。如下圖所示：
<html><head><meta charset="utf-8"><title>導入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">點擊我</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--結構分析
Bootstrap框架中的模態彈出框，分別運用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內容都放置在“modal-content”中，其主要又包括三個部分：
? 彈出框頭部，一般使用“modal-header”表示，主要包括標題和關閉按鈕
? 彈出框主體，一般使用“modal-body”表示，彈出框的主要內容
? 彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕
如下圖所示：
模態彈出窗的結構如下：
<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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->彈出窗的主體樣式實現：
但是對于一個模態彈出窗而言，modal-content才是樣式的關鍵。其主要設置了彈出窗的邊框、邊距、背景色和陰影等樣式。
/*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三個部分樣式設置：
/*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;}這三個部分主要控制一些間距的樣式。而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>結構分析</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--實現原理解析（一）
實現原理解析：
bootstrap中的“模態彈出框”有以下幾個特點：
1、模態彈出窗是固定在瀏覽器中的。
2、單擊右側全屏按鈕，在全屏狀態下，模態彈出窗寬度是自適應的，而且modal-dialog水平居中。
3、當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px。
固定在瀏覽器(源代碼)實現：
/*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;}水平居中(源代碼)實現：
/*bootstrap.css文件第5407行～第5411行*/.modal-dialog { position: relative; width: auto; margin: 10px;}當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px（源代碼）實現：
/*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>實現原理解析（一）</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觸發</button><!-- 模態彈出窗內容 --><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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--實現原理解析（二）
蒙板樣式實現：
大家或許注意到了，在做模態彈出窗時，底部常常會有一個透明的黑色蒙層效果，如下圖所示：
在Bootstrap框架中為模態彈出窗也添加了一個這樣的蒙層樣式“modal-backdrop”，只不過他默認情況下是全屏黑色的：
/*bootstrap.css文件第5424行～第5432行*/.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000;}同樣，給其添加了一個過渡動畫，從fade到in，把opacity值從0變成了0.5。上圖展示的就是in狀態下的效果：
/*bootstrap.css文件第5433行～第5440行*/.modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0;}.modal-backdrop.in { filter: alpha(opacity=50); opacity: .5;}兩種尺寸選擇：
除此之外，Bootstrap框架還為模態彈出窗提供了不同尺寸，一個是大尺寸樣式“modal-lg”，另一個是小尺寸樣式“modal-sm”。其結構上稍做調整：
<!-- 大尺寸模態彈出窗 --><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><!-- 小尺寸模態彈出窗 --><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>來簡單的看一個示例效果：
對于這兩種尺寸的模態彈出窗，Bootstrap在媒體查詢中做過處理：代碼同上見bootstrap.css
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>模態彈出框--實現原理解析（二）</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><h3>大/小尺寸模態彈出框</h3><!-- Large modal --><button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大的模態彈出窗</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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">小的模態彈出窗</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--觸發模態彈出窗2種方法
眾所周知，模態彈出窗在頁面加載完成時，是被隱藏在頁面中的，只有通過一定的動作（事件）才能觸發模態彈出窗的顯示。在Bootstrap框架中實現方法有2種，接下來分別來介紹這2種觸發模態彈出窗的使用方法。
聲明式觸發方法：
方法一：模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""）。例如：
<!-- 觸發模態彈出窗的元素 --><button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button><!-- 模態彈出窗 --><div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模態彈出窗內容 --> </div> </div></div>注意以下事項：
1、data-toggle必須設置為modal(toggle中文翻譯過來就是觸發器)；
2、data-target可以設置為CSS的選擇符，也可以設置為模態彈出窗的ID值，一般情況設置為模態彈出窗的ID值，因為ID值是唯一的值。
方法二：觸發模態彈出窗也可以是一個鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性，如：
<!-- 觸發模態彈出窗的元素 --><a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a><!-- 模態彈出窗 --><div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模態彈出窗內容 --> </div> </div></div>不過建議還是使用統一使用data-target的方式來觸發。
點擊按鈕就能觸發彈出窗：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>模態彈出窗的使用</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!--下面是代碼任務部分--><!-- href觸發模態彈出窗元素 --><a class="btn btn-primary">通過鏈接href屬性觸發</a><!-- 模態彈出窗內容 --><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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div></div><!-- data-target觸發模態彈出窗元素 --><button class="btn btn-primary" type="button">通過data-target觸發</button><!-- 模態彈出窗內容 --><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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--為彈出框增加過度動畫效果
為模態彈出框增加過度動畫效果：
可通過給“.modal”增加類名“fade”為模態彈出框增加一個過渡動畫效果。
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小的模態彈出窗</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div></div>源代碼實現：
/*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>模態彈出窗的使用</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!-- data-target觸發模態彈出窗元素 --><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發</button><!-- 模態彈出窗內容 --><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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--模態彈出窗的使用（data-參數說明）
除了通過data-toggle和data-target來控制模態彈出窗之外，Bootstrap框架針對模態彈出框還提供了其他自定義data-屬性，來控制模態彈出窗。比如說:是否有灰色背景modal-backdrop，是否可以按ESC鍵關閉模態彈出窗。有關于Modal彈出窗自定義屬性相關說明如下所示：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>模態彈出窗的使用</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!-- data-target觸發模態彈出窗元素 --><button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通過data-target觸發</button><!-- 模態彈出窗內容 --><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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--模態彈出窗的使用（JavaScript觸發）
JavaScript觸發方法
除了使用自定義屬性觸發模態彈出框之外，還可以通過JavaScript方法來觸發模態彈出窗。通過給一個元素一個事件，來觸發。比如說給一個按鈕一個單擊事件，然后觸發模態彈出窗。如下面的一個簡單示例：
<!-- 觸發模態彈出窗元素 --><button class="btn btn-primary" type="button">點擊我</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->JavaScript觸發的彈出窗代碼：
$(function(){ $(".btn").click(function(){ $("#mymodal").modal(); });});運行效果如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>模態彈出窗的使用（三）</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">點擊我</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>模態彈出框--JavaScript觸發時的參數設置（一）
使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置。
屬性設置
模態彈出窗默認支持的自定義屬性主要有：
比如你不想讓用戶按ESC鍵關閉模態彈出窗，你就可以這樣做：
$(function(){ $(".btn").click(function(){ $("#mymodal").modal({ keyboard:false }); });});這一節，我們對JavaScript觸發模態彈出窗的屬性設置進行了介紹，下一節我們將繼續對參數設置和事件設置進行介紹。
模態彈出框--JavaScript觸發時的參數設置（二）
上一節，我們對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動畫漂完成之后）觸發 |
調用方法也非常簡單：
$('#myModal').on('hidden.bs.modal', function (e) { // 處理代碼...})<!DOCTYPE html><html><head><meta charset="utf-8"><title>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">點擊我</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">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</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>
新聞熱點
疑難解答
