Bootstrap 5 示例

Bootstrap 网格系统示例

• 用于平板电脑和台式机的 Bootstrap 两列网格布局
• Bootstrapbc 三列网格布局，适用于横向模式下的平板电脑和桌面
• 所有设备的 Bootstrap 自动布局列
• Bootstrapbc 列的大小基于其内容的宽度
• 适用于所有设备的 Bootstrap 多列网格布局
• Bootstrapbc 嵌套网格列布局
• Bootstrapbc 行内列的垂直对齐方式
• Bootstrapbc 行内各列的垂直对齐方式
• 行内网格列的 Bootstrapbc 重新排序
• Bootstrapbc 偏移网格列
• Bootstrap 紧凑网格列
• Bootstrapbc 固定布局
• Bootstrap 流体布局
• Bootstrap 响应式布局

Bootstrap 排版

• Bootstrapbc 标题
• 带有辅助文本的 Bootstrap 标题
• Bootstrapbc 显示标题
• Bootstrap 正常和前导段落
• Bootstrapbc 文本对齐方式
• Bootstrapbc 文本格式
• Bootstrapbc 文本转换
• Bootstrap 文本强调类
• Bootstrap 块引用格式
• Bootstrap 截断长文本
• Bootstrap 处理文本溢出
• Bootstrap 打破长词

Bootstrap 表格

• 使用 Bootstrap 创建简单表格
• 使用 Bootstrap 创建暗表格
• 使用 Bootstrap 创建重音表格
• 带重音行的 Bootstrap 表格
• 带条纹行的 Bootstrap 表格
• Bootstrapc 表格带边框
• 使用 Bootstrap 创建无边框表格
• 在表格行上启用悬停状态
• Bootstrap 小型或紧凑型表格
• 使用 Bootstrap 为表头设置浅色背景
• 使用 Bootstrap 为表头设置深色背景
• Bootstrapc 响应式表格

Bootstrap 列表

• 使用 Bootstrap 创建列表
• Bootstrap 无样式有序和无序列表
• 内嵌有序和无序列表项
• 使用 Bootstrap 创建水平定义列表
• Bootstrapc 列表组
• Bootstrapc 列表组，其中包含禁用和活动项目
• Bootstrap 边到边列表组
• Bootstrapc 编号列表组
• 带复选框的 Bootstrap 列表组
• 带单选按钮的 Bootstrap 列表组
• 带链接项目的 Bootstrap 列表组
• 带有自定义内容的 Bootstrap 链表组
• Bootstrapc 列出具有重点类别的组
• 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 创建自定义范围输入
• 为 Bootstrapc 自定义范围指定 min、max 和 step 属性

Bootstrap 输入组

• 使用 Bootstrap 前置和附加输入
• 使用 Bootstrap 前置和附加选择框和文本区域
• 在 Bootstrap 中使用复选框和单选按钮创建输入组
• 在 Bootstrap 的输入组中放置多个输入
• 在 Bootstrap 的输入组中放置多个插件
• 在 Bootstrap 的输入组中放置按钮
• 在 Bootstrap 的输入组中放置按钮下拉菜单
• 在 Bootstrap 的输入组中放置分段下拉按钮组
• Bootstrap 输入组的高度大小

Bootstrap 按钮

• 使用 Bootstrap 创建按钮
• 在 Bootstrap 中创建轮廓按钮样式
• 使用 Bootstrap 创建大按钮
• 使用 Bootstrap 创建小按钮
• 使用 Bootstrap 创建块按钮
• 使用 input 和 button 元素创建禁用的 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 分页
• 在 Bootstrapc 分页中使用 span 元素禁用链接
• 更改 Bootstrap 分页的大小
• Bootstrap 分页居中对齐
• Bootstrap 分页右对齐

Bootstrap 徽章

• 使用 Bootstrap 创建徽章
• 使用 Bootstrap 创建彩色徽章
• 使用 Bootstrap 创建胶囊徽章
• 显示带有 Bootstrapbc 徽章的计数器
• Bootstrap 徽章的定位

Bootstrap 进度条

• 使用 Bootstrap 创建进度条
• 在 Bootstrap 中为进度条添加标签
• 在 Bootstrap 中更改进度条的高度
• 使用 Bootstrap 创建剥离的进度条
• 使用 Bootstrap 创建动画进度条
• 动态更改 Bootstrap 进度条的值
• 使用 Bootstrap 创建堆叠的进度条
• 在 Bootstrap 中创建多色进度条
• 在 Bootstrap 中创建多色条纹进度条

Bootstrap 微调器

• 使用 Bootstrap 创建边框微调器
• 使用 Bootstrap 创建彩色微调器
• 使用 Bootstrap 创建不断增长的微调器
• 使用 Bootstrap 创建有色旋转器
• 使用 Bootstrap 创建小型微调器
• 使用 CSS 自定义 Bootstrapbc 微调器的大小
• 在 Bootstrap 中的按钮内放置微调器
• 在 Bootstrap 中更改微调器的对齐方式

Bootstrap Jumbotron

• 创建 jumbotron 以在 Bootstrap 中展示内容
• 在 Bootstrap 中创建全宽 jumbotron

Bootstrap 模态

• 使用 Bootstrap 创建模态框
• 通过数据属性启动 Bootstrap 模态框
• 通过 JavaScript 启动 Bootstrap 模态框
• 在 Bootstrap 中更改模态框的大小
• 通过 JavaScript 根据触发按钮更改 Bootstrap 模态内容
• 垂直居中 Bootstrap 模态
• 在 Bootstrap modal 中创建行和列
• 使用 JavaScript 通过 Ajax 在 Bootstrap 模式中加载内容
• 通过数据属性防止 Bootstrap 模态在点击外部时消失
• 通过 JavaScript 防止在单击黑暗区域时隐藏 Bootstrap 模态
• 防止 Bootstrap 模态在通过 JavaScript 按下转义键时隐藏
• Bootstrap toggle() 模态方法
• Bootstrap show() 模态方法
• Bootstrap hide() 模态方法
• Bootstrap handleUpdate() 模态方法
• Bootstrap dispose() 模态方法
• Bootstrap getInstance() 模态方法
• Bootstrap getOrCreateInstance() 模态方法
• 当 Bootstrapbc 模态窗口完全关闭时显示一条消息
• 在 Bootstrap 模态窗口外单击时显示消息

Bootstrap 下拉菜单

• 在 Bootstrap 中创建下拉菜单
• 将下拉菜单添加到 Bootstrap 导航栏
• 将下拉菜单添加到 Bootstrap 导航
• 将下拉菜单添加到 Bootstrap 按钮
• 将下拉菜单添加到 Bootstrap 拆分按钮
• 将下拉菜单添加到 Bootstrap 按钮组
• 在 Bootstrap 垂直堆叠的按钮组中添加下拉菜单
• 在 Bootstrap 中创建 dropup、dropleft 和 dropright 菜单
• 在 Bootstrap 中创建右对齐下拉菜单
• 将标题添加到 Bootstrap 中的下拉项
• 在 Bootstrap 的下拉菜单中禁用项目
• 通过 JavaScript 向元素添加下拉菜单
• Bootstrap toggle() 下拉菜单方法
• Bootstrap show() 下拉菜单方法
• Bootstrap hide() 下拉菜单方法
• Bootstrap update() 下拉菜单方法
• Bootstrap dispose() 下拉菜单方法
• Bootstrap getInstance() 下拉菜单方法
• Bootstrap getOrCreateInstance() 下拉菜单方法
• 在 Bootstrap 中单击获取下拉链接的文本内容

Bootstrap 选项卡

• 使用 Bootstrap 创建基本选项卡
• 通过数据属性在 Bootstrap 中创建动态选项卡
• 通过 JavaScript 在 Bootstrap 中创建动态选项卡
• 通过 JavaScript 激活单个 Bootstrap 选项卡
• Bootstrap show() 选项卡方法
• Bootstrap dispose() 选项卡方法
• Bootstrap getInstance() 选项卡方法
• Bootstrap getOrCreateInstance() 选项卡方法
• 通过 JavaScript 在 Bootstrap 中获取活动选项卡和上一个选项卡的名称

Bootstrap 工具提示

• 使用 Bootstrap 创建工具提示
• 通过数据属性设置 Bootstrap 工具提示的位置
• 通过 JavaScript 设置 Bootstrap 工具提示的位置
• 通过 JavaScript 设置 Bootstrap 工具提示的标题文本
• 通过 JavaScript 在 Bootstrap 工具提示中插入 HTML 内容
• 通过 JavaScript 设置 Bootstrapc 工具提示的显示隐藏时间
• 通过 JavaScript 为 Bootstrapbc 工具提示创建自定义模板
• 通过 JavaScript 设置 Bootstrap 工具提示的容器元素
• Bootstrap show() 工具提示方法
• Bootstrap hide() 工具提示方法
• Bootstrap toggle() 工具提示方法
• Bootstrap dispose() 工具提示方法
• Bootstrap enable() 工具提示方法
• Bootstrap disable() 工具提示方法
• Bootstrap toggleEnabled() 工具提示方法
• Bootstrap update() 工具提示方法
• Bootstrap getInstance() 工具提示方法
• Bootstrap getOrCreateInstance() 工具提示方法
• 当 Bootstrapbc 工具提示淡出过渡完成时显示一条消息

Bootstrap 弹出框

• 使用 Bootstrap 创建弹出框
• 通过数据属性设置 Bootstrapc 弹出框的位置
• 通过 JavaScript 设置 Bootstrap 弹出框的位置
• 下次单击时关闭 Bootstrap 弹出框
• 通过 JavaScript 设置 Bootstrap 弹出框的标题文本
• 通过 JavaScript 在 Bootstrapbc 弹出框内插入 HTML 内容
• 通过 JavaScript 设置 Bootstrap 弹出框的显示隐藏时间
• 通过 JavaScript 为 Bootstrap 弹出框创建自定义模板
• 通过 JavaScript 为 Bootstrap 弹出框设置容器元素
• Bootstrap show() 弹出方法
• Bootstrap hide() 弹出方法
• Bootstrap toggle() 弹出方法
• Bootstrap dispose() 弹出方法
• Bootstrap enable() 弹出方法
• Bootstrap disable() 弹出方法
• Bootstrap toggleEnabled() 弹出方法
• Bootstrap update() 弹出方法
• Bootstrap getInstance() 弹出方法
• Bootstrap getOrCreateInstance() 弹出方法
• 当 Bootstrapbc 弹出框淡出过渡完成时显示一条消息

Bootstrap 警报消息

• 使用 Bootstrap 创建成功、错误、警告和信息警报消息
• 使用 Bootstrap 创建主要、次要、深色和浅色警报消息
• 将图标添加到 Bootstrapbc 警报
• 在 Bootstrapbc 警报中放置其他内容
• Bootstrap 警报中的匹配链接颜色
• 通过数据属性解除 Bootstrap 警报
• 通过 JavaScript 解除 Bootstrap 警报
• Bootstrap close() 警报方法
• Bootstrap dispose() 警报方法
• Bootstrap getInstance() 警报方法
• Bootstrap getOrCreateInstance() 警报方法
• 当 Bootstrapc 警报完全关闭时显示一条消息

Bootstrap 折叠

• 通过数据属性展开和折叠元素
• 通过 JavaScript 展开和折叠元素
• Bootstrap .collapse(options) 方法
• Bootstrap .collapse('toggle') 方法
• Bootstrap .collapse('show') 方法
• Bootstrap .collapse('hide') 方法
• 当可折叠元素完全关闭时显示一条消息

Bootstrap 轮播

• 使用 Bootstrap 创建轮播
• 为 Bootstrap 轮播项目添加标题
• 创建 Bootstrapbc 轮播的深色变体
• 通过数据属性激活 Bootstrapbc 轮播
• 通过 JavaScript 激活 Bootstrap Abc 轮播
• 通过 JavaScript 从 Bootstrapbc 轮播中移除自动滑动
• Bootstrap cycle() 轮播方法
• Bootstrap pause() 轮播方法
• Bootstrap prev() 轮播方法
• Bootstrap next() 轮播方法
• Bootstrap nextWhenVisible() 轮播方法
• Bootstrap to() 轮播方法
• Bootstrap dispose() 轮播方法
• Bootstrap getInstance() 轮播方法
• Bootstrap getOrCreateInstance() 轮播方法
• 当 Bootstrap 轮播项目的滑动完成时显示消息

Bootstrap 预输入

• 使用本地数据集创建 Twitter 预输入
• 使用外部数据集创建 Twitter 预输入

Bootstrap 滚动监听

• 使用 Bootstrap 创建 scrollspy
• 通过数据属性将 滚动监听添加到 Bootstrap 导航栏
• 通过 JavaScript 将 滚动监听添加到 Bootstrap 导航栏
• 通过 JavaScript 向 Bootstrap 滚动监听添加偏移量
• Bootstrap refresh() 滚动监听方法
• Bootstrap dispose() 滚动监听方法
• Bootstrap getInstance() 滚动监听方法
• Bootstrap getOrCreateInstance() 滚动监听方法
• 当被 滚动监听突出显示时显示菜单项的名称
• 通过 JavaScript 获取 Bootstrap 滚动监听当前突出显示的导航项

Bootstrap Toasts

• 使用 Bootstrap 创建 toast
• 在 Bootstrap 中垂直堆叠 toast
• 使用 CSS 在屏幕上放置 Bootstrap toast
• 停止通过数据属性自动隐藏 Bootstrap toast
• 通过 JavaScript 禁用 Bootstrap toasts 自动隐藏
• 通过 JavaScript 增加 Bootstrap 的自动隐藏时间
• Bootstrap show() toast 方法
• Bootstrap hide() toast 方法
• Bootstrap dispose() toast 方法
• Bootstrap getInstance() toast 方法
• Bootstrap getOrCreateInstance() toast 方法
• 当 Bootstrap toast 完全关闭时显示一条消息