text
代表指定意义的文本颜色
柔和的文本。
重要的文本。
执行成功的文本。
代表一些提示信息的文本。
警告文本。
危险操作文本。
副标题。
深灰色文字。
浅灰色文本(白色背景上看不清楚)。
白色文本(白色背景上看不清楚)。
背景颜色
重要的背景颜色。
执行成功背景颜色。
信息提示背景颜色。
警告背景颜色
危险背景颜色。
副标题背景颜色。
深灰背景颜色。
浅灰背景颜色。
alert
提示框
提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:
成功! 指定操作成功提示信息。
信息! 请注意这个信息。
警告! 设置警告信息。
错误! 失败的操作
首选! 这是一个重要的操作信息。
次要的! 显示一些不重要的信息。
深灰色! 深灰色提示框。
浅灰色!浅灰色提示框。
提示框添加链接
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接:
成功! 你应该认真阅读 这条信息。
信息! 你应该认真阅读 这条信息。
警告! 你应该认真阅读 这条信息。
错误! 你应该认真阅读 这条信息。
首选! 你应该认真阅读 这条信息。
次要的! 你应该认真阅读 这条信息。
深灰色!你应该认真阅读 这条信息。
灰色! 你应该认真阅读 这条信息。
btn
按钮样式
按钮元素
链接按钮按钮设置边框
不同大小的按钮
块级按钮
大的块级按钮
小的块级按钮
按钮状态
禁止点击的链接badge
徽章
测试标题 New
测试标题 New
测试标题 New
测试标题 New
测试标题 New
测试标题 New
各种颜色类型的徽章
主要 次要 成功 危险 警告 信息 浅色 深色药丸形状徽章
默认 主要 成功 信息 警告 危险徽章嵌入到按钮内
progress
基本进度条
要创建一个默认的进度条,可以在容器元素上添加 .progress 类,在子元素上添加 progress-bar 类,并设置进度条进度情况::
进度条高度
进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他:
进度条文本标签
多种颜色的进度条
Bootstrap4 提供了以下几种进度条颜色:
条纹的进度条
可以使用 .progress-bar-striped 类来设置条纹进度条:
动画进度条
使用 .progress-bar-animated 类可以为进度条添加动画:
混合色彩进度条
进度条可以设置多种颜色: