text

代表指定意义的文本颜色

柔和的文本。

重要的文本。

执行成功的文本。

代表一些提示信息的文本。

警告文本。

危险操作文本。

副标题。

深灰色文字。

浅灰色文本(白色背景上看不清楚)。

白色文本(白色背景上看不清楚)。

背景颜色

重要的背景颜色。

执行成功背景颜色。

信息提示背景颜色。

警告背景颜色

危险背景颜色。

副标题背景颜色。

深灰背景颜色。

浅灰背景颜色。

alert

提示框

提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:

成功! 指定操作成功提示信息。
信息! 请注意这个信息。
警告! 设置警告信息。
错误! 失败的操作
首选! 这是一个重要的操作信息。
次要的! 显示一些不重要的信息。
深灰色! 深灰色提示框。
浅灰色!浅灰色提示框。

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接:

成功! 你应该认真阅读 这条信息
信息! 你应该认真阅读 这条信息
警告! 你应该认真阅读 这条信息
错误! 你应该认真阅读 这条信息
首选! 你应该认真阅读 这条信息
次要的! 你应该认真阅读 这条信息
深灰色!你应该认真阅读 这条信息
灰色! 你应该认真阅读 这条信息

btn

按钮样式

按钮元素

链接按钮

按钮设置边框

不同大小的按钮

块级按钮

大的块级按钮

小的块级按钮

按钮状态

禁止点击的链接

badge

徽章

测试标题 New

测试标题 New

测试标题 New

测试标题 New

测试标题 New
测试标题 New

各种颜色类型的徽章

主要 次要 成功 危险 警告 信息 浅色 深色

药丸形状徽章

默认 主要 成功 信息 警告 危险

徽章嵌入到按钮内

progress

基本进度条

要创建一个默认的进度条,可以在容器元素上添加 .progress 类,在子元素上添加 progress-bar 类,并设置进度条进度情况::

进度条高度

进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他:



进度条文本标签

70%

多种颜色的进度条

Bootstrap4 提供了以下几种进度条颜色:





条纹的进度条

可以使用 .progress-bar-striped 类来设置条纹进度条:





动画进度条

使用 .progress-bar-animated 类可以为进度条添加动画:

混合色彩进度条

进度条可以设置多种颜色:

Free Space
Warning
Danger