模态插件
模态插件是显示在当前页面顶部的对话框/弹出窗口：
提示：插件可以单独包括（用引导的个性化"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模态参考 。