bootstrap模态框有哪些

bootstrap 模态框是一个轻量级的多用途javascript弹出窗口，可自定义和响应式。可以使用它在网站中显示警告窗口、视频和图片。使用bootstrap构建的网站可以使用模态框来显示条款和条件（作为注册过程的一部分），视频，甚至社交媒体小部件。

为了可以更好地理解它，我们来看一下Bootstrap模态框的各个组成部分。

Bootstrap 模态框主要分为三个部分：头部（header），正文（body）和页脚（footer）。每个部分都有自己的意义，因此我们应该正确的使用它们。我们稍后将讨论这些。Bootstrap模态框最令人兴奋的是什么？你不需要写任何JavaScript代码就可以使用它！所有的代码和样式都是由Bootstrap预定义的。你所需要做的只是使用正确的标记和属性来触发它。

默认的模态框

默认的模态框如下所示：

要触发模态框，你需要添加链接或者按钮。触发元素的标记可能如下所示：

<a>Click to open Modal</a>

请注意，link元素有两个自定义数据属性：data-toggle和data-target。toggle告诉Bootstrap要做什么，target告诉Bootstrap要打开哪个元素。所以每当点击这样的链接时，都会出现一个id为“basicModal”的模态框。

现在让我们看看定义模态框所需的代码：

<div>    <div>        <div>            <div>            <button>×</button>            <h4>Modal title</h4>            </div>            <div>                <h3>Modal Body</h3>            </div>            <div>                <button>Close</button>                <button>Save changes</button>        </div>    </div>  </div></div>

模态框的父div应具有与上述触发元素中使用的相同的ID。在我们的例子中是id="basicModal"。

注意：父模态框元素中自定义属性aria-labelledby和aria-hidden让其可被访问。让所有人都能访问你的网站是一个很好的做法，所以你应该使用这些属性，因为它们不会对模态框的普通功能产生负面影响。

在模态框的HTML代码中，我们可以看到一个封装div嵌套在父模态框div内。这个div的类modal-content告诉bootstrap.js在哪里查找模态框的内容。在这个div内，我们需要放置前面提到的三个部分：头部，正文和页脚。

模态框头部，顾名思义，用于给模态添加一个标题或者如“x”关闭按钮等其他元素。这些元素还应该有一个data-dismiss属性告诉Bootstrap哪个元素要隐藏。

然后我们看一下模态框的正文。可以把它看做一个打开的画布，你可以在其中添加任何类型的数据，包括嵌入YouTube视频，图像或者任何其他内容。

最后，我们看一下模态框的页脚。该区域默认为右对齐。在这个区域，你可以放置“保存”，“关闭”，“接受”等操作按钮，这些按钮与“模态框”需要表现的行为相关联。

现在我们完成了我们的第一个模态框！你可以在我们的演示页面上查看。