- Bootstrap 教程
- Bootstrap - 首页
- Bootstrap - 概述
- Bootstrap - 环境设置
- Bootstrap - 从右到左 (RTL)
- Bootstrap - CSS 变量
- Bootstrap - 色彩模式
- Bootstrap 布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 间距
- Bootstrap - 实用程序类
- Bootstrap - CSS 网格
- Bootstrap 组件
- Bootstrap - 手风琴
- Bootstrap - 警示框
- Bootstrap - 徽章
- Bootstrap - 面包屑
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 走马灯
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态框
- Bootstrap - 导航栏
- Bootstrap - 导航 & 标签
- Bootstrap - 侧边栏
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 气泡提示
- Bootstrap - 进度条
- Bootstrap - 滚动监听
- Bootstrap - 加载动画
- Bootstrap - 提示框
- Bootstrap - 工具提示
- Bootstrap 表单
- Bootstrap - 表单
- Bootstrap - 表单控件
- Bootstrap - 选择框
- Bootstrap - 复选框 & 单选框
- Bootstrap - 范围滑块
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- Bootstrap - 验证
- Bootstrap 辅助类
- Bootstrap - 清除浮动
- Bootstrap - 颜色 & 背景
- Bootstrap - 彩色链接
- Bootstrap - 聚焦环
- Bootstrap - 图标链接
- Bootstrap - 定位
- Bootstrap - 宽高比
- Bootstrap - 堆叠
- Bootstrap - 拉伸链接
- Bootstrap - 文本截断
- Bootstrap - 垂直线
- Bootstrap - 视觉隐藏
- Bootstrap 实用程序类
- Bootstrap - 背景
- Bootstrap - 边框
- Bootstrap - 颜色
- Bootstrap - 显示
- Bootstrap - 弹性盒子
- Bootstrap - 浮动
- Bootstrap - 交互
- Bootstrap - 链接
- Bootstrap - 对象适配
- Bootstrap - 不透明度
- Bootstrap - 溢出
- Bootstrap - 定位
- Bootstrap - 阴影
- Bootstrap - 尺寸
- Bootstrap - 间距
- Bootstrap - 文本
- Bootstrap - 垂直对齐
- Bootstrap - 可见性
- Bootstrap 演示
- Bootstrap - 网格演示
- Bootstrap - 按钮演示
- Bootstrap - 导航演示
- Bootstrap - 博客演示
- Bootstrap - 滑块演示
- Bootstrap - 走马灯演示
- Bootstrap - 页眉演示
- Bootstrap - 页脚演示
- Bootstrap - 英雄区域演示
- Bootstrap - 特色区域演示
- Bootstrap - 侧边栏演示
- Bootstrap - 下拉菜单演示
- Bootstrap - 列表组演示
- Bootstrap - 模态框演示
- Bootstrap - 徽章演示
- Bootstrap - 面包屑演示
- Bootstrap - 特大标题演示
- Bootstrap - 粘性页脚演示
- Bootstrap - 相册演示
- Bootstrap - 登录演示
- Bootstrap - 定价演示
- Bootstrap - 结账演示
- Bootstrap - 产品演示
- Bootstrap - 封面演示
- Bootstrap - 仪表盘演示
- Bootstrap - 粘性页脚导航栏演示
- Bootstrap - 砌体布局演示
- Bootstrap - 启动模板演示
- Bootstrap - 相册 RTL 演示
- Bootstrap - 结账 RTL 演示
- Bootstrap - 走马灯 RTL 演示
- Bootstrap - 博客 RTL 演示
- Bootstrap - 仪表盘 RTL 演示
- Bootstrap 有用资源
- Bootstrap - 问题与解答
- Bootstrap - 快速指南
- Bootstrap - 有用资源
- Bootstrap - 讨论
Bootstrap - 模态框演示
什么是模态框？
Bootstrap 中的模态框是一个对话框/弹出窗口，显示在当前页面之上。它用于显示重要信息或在执行特定操作之前向用户请求确认。
模态框是 Bootstrap 的核心 UI 组件，可以使用内置的 CSS 类和 JavaScript 方法轻松自定义。
| 类 | 描述 |
|---|---|
| .modal | 用于定义模态框的基本结构 |
| .modal-header | 用于定义模态框的头部区域 |
| .modal-body | 用于定义模态框的主体区域 |
| .modal-footer | 用于定义模态框的底部区域 |
| .fade | 用于为模态框添加淡入淡出效果 |
| .modal-dialog | 用于自定义模态框的大小和位置 |
| .modal-content | 用于自定义模态框的背景颜色和边框 |
| .modal-title | 用于自定义模态框的标题 |
| .close | 用于为模态框添加关闭按钮 |
模态框的一些示例如下所示
| 示例 | 描述 | 下载链接 |
|---|---|---|
| 基本的静态模态框 | 此示例显示了一个静态模态框。 | 下载 |
| 可滚动的模态框 | 此示例显示了一个可滚动的模态框。 | 下载 |
| 带有静态背景的模态框 | 此示例显示了一个带有静态背景的模态框。 | 下载 |
| 带有工具提示的模态框 | 此示例显示了一个带有工具提示的模态框。 | 下载 |
| 带有气泡提示的模态框 | 此示例显示了一个带有气泡提示的模态框。 | 下载 |
| 带有网格的模态框 | 此示例显示了一个带有网格的模态框。 | 下载 |
| 动画模态框 | 此示例显示了一个带有动画的模态框。 | 下载 |
广告