对话框的基础应用方法展示

面板主要用于容器固定在页面中的某个位置，而对话框则是弹出浮动在页面上。对话框作为Bootstrap中的一个独立组件，在Web开发中应用比较广泛。Bootstrap中的对话框可以分为如下几个部分：class="modal"：对话框的最外层容器，可以控制对话框的显示与隐藏。class="modal-dialog"：第二层容器。class="modal-content"：第三层容器，控制对话框的边框、边距、背景、阴影效果等；而这个容器里面又包含了另外三个部分：class="modal-header"：对话框头部，包含标题、关闭按钮等。class="modal-body"：对话框主体，是对话框的主要内容。class="modal-footer"：对话框脚注，包含操作按钮等。代码如下：

代码中定义了一个对话框，结构如上面罗列的一样，在class="modal"中使用了一个class="show"用于在页面上显示这个对话框。还有另外一个样式class="fade"则是用于隐藏对话框，页面运行效果如图所示。