BootStrap模态框使用

各位大家好这是第一次写自己在学习BootStrap中的一些心得的，和总结。初次发博不好地方大家可以留言评论，博主一定多多改进。

<h2>创建模态框（Modal）h2>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题h4>
            div>
            <div class="modal-body">在这里添加一些文本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>

先从按钮里面的属性开始，class是给按钮定义的类名里面的btn btn-primary btn-lg都是定义的BootStrap写好的样式，BootStrap有很多写好的样式和定义好的图标，重点的是后面的”data-“这一属性，这是html5中给标签的自定义属性，如果使用BootStrap模态框就要用到这一属性：
1、data-toggle=”modal”,HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
2、data-target=”#myModal” 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框。（注意：使用那个模态框，就把哪个模态框的id写在data-target=”“中，例如，我定义的是id=”myModal”。）
3、重点：调用模态框，data-toggle data-toggle这两个属性一个不能少。

二、模态框
模态框本体其实就是页面中的一部分，只不过通过BootStrap中定义好的classl类，通过引用样式来达到效果。
1、.modal，用来把

的内容识别为模态框。.fade 当模态框被切换时，它会引起内容淡入淡出。aria-labelledby=”myModalLabel”，该属性引用模态框的标题。aria-hidden=”true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
2、

，modal-header 是为模态窗口的头部定义样式的类。data-dismiss=”modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
3、class=”modal-body”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。这里你可以根据自己的需要往里面放入自己想要的标签 比如文本。根据自己需要可以自行放入模态框内容。比如博主自己在模态框主题中添加了文本框和

4、class=”modal-footer”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。