Bootstrap 模态框参考
-
模态框 CSS 类
下表总结了 Bootstrap 模态框 CSS 类:类名 描述 示例 .modal 创建基本模态 尝试一下 .modal-body 定义模态主体的样式。 在此处添加任何HTML标记(p,img等) 尝试一下 .modal-content 设置模态的样式(边框,背景颜色等) 尝试一下 .modal-dialog-centered 在页面内垂直和水平居中模态 尝试一下 .modal-dialog-scrollable 在模式内添加滚动条 尝试一下 .modal-header 模态的头(通常包含标题和关闭按钮) 尝试一下 .modal-footer 模态的页脚(通常包含一个操作按钮和一个关闭按钮) 尝试一下 .modal-lg 大模态(比默认宽) 尝试一下 .modal-sm 小模态(较小的宽度) 尝试一下 .modal-xl 特大模态 尝试一下 .fade 在打开模态时添加淡入淡出效果 尝试一下 -
模态框选项
可以通过数据属性或 JavaScript 传递选项;对于数据属性,将选项名称附加到 data-,如 data-backdrop="" 所示。参数 类型 默认值 描述 示例 backdrop 布尔值或字符串(static) true 指定模态是否应具有深色覆盖:- true-深色覆盖
- false-无覆盖层(透明)
注意:如果指定值“static”,则在其外部单击时无法关闭该模式keyboard 布尔值 true 指定是否可以使用转义键(Esc)关闭模式:- true-可以使用Esc关闭模式
- false-无法使用Esc关闭模式
show 布尔值 true 指定初始化时是否显示模态 -
-
-