模態插件
模態插件是顯示在當前頁面頂部的對話框/彈出窗口：
提示：插件可以單獨包括（用引導的個性化"modal.js"文件），或一次（使用"bootstrap.js"或"bootstrap.min.js"
如何創建模式
下面的例子演示如何創建一個基本的模式：
例
<!-- Trigger the modal with a button -->
<button type="button" class="btn
btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Modal -->
<div id="myModal"
class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
試一試» 例子解釋：
在"Trigger"部分：
要觸發模式窗口，你需要使用一個按鈕或鏈接。
然後包括兩個data-*屬性：
-
data-toggle="modal"打開的模式窗口 -
data-target="#myModal"指向模式的id
的"Modal"的一部分：
父<div>模態必須有一個ID是相同的用於觸發模態數據目標屬性的值("myModal")
該.modal類標識的內容<div>作為一個模式，並帶來焦點吧。
該.fade類添加漸漸消逝模態和縮小過渡效果。 刪除這個類，如果你不想要這個效果。
該屬性role="dialog"改善輔助使用屏幕閱讀器的人。
該.modal-dialog類設置模式的正確寬度和幅度。
在“模態內容”部分：
該<div>與class="modal-content ”風格模式（邊框，背景顏色等）。 這裡面<div>添加模態的標題，正文和頁腳。
該.modal-header類是用來定義樣式為模態的標題。 在<button>頭裡面有一個data-dismiss="modal"屬性，如果你點擊它，它關閉模式。 該.close類樣式的關閉按鈕，以及.modal-title類樣式有一個適當的行高頭。
該.modal-body類用於定義樣式的模式的主體。 在這裡添加任何HTML標記; 段落，圖像，視頻等。
該.modal-footer類是用來定義樣式為模態的頁腳。 注意，這個區域是正確的默認對齊。
形態尺寸
通過添加更改模式的大小.modal-sm類小情態動詞或.modal-lg類大模態。
大小類添加到<div>與類元素.modal-dialog ：
 | 默認情況下，情態動詞中等大小。 |
|---|
完成引導模態參考
對於所有模式選項，方法和事件的完整參考，請訪問我們的引導JS模態參考 。