Bootstrap 4 颜色
文本颜色
Bootstrap 4 提供了一些有代表意义的颜色类: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body (默认颜色，为黑色) 和 .text-light:
实例
柔和的文本。
重要的文本。
执行成功的文本。
代表一些提示信息的文本。
警告文本。
危险操作文本。
副标题。
深灰色文字。
默认颜色，为黑色。
浅灰色文本（白色背景上看不清楚）。
在链接中使用:
可以设置文本颜色透明度为 50% ，使用 .text-black-50 或 .text-white-50 类:
实例
白色背景上不透明度为 50% 的黑色文本
黑色背景上不透明度为 50% 的白色文本
背景颜色
提供背景颜色的类有: .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
实例
这个文字很重要。#007bff
此文字表示成功。#28a745
这个文本代表一些信息。#17a2b8
此文本表示警告。#ffc107
此文字代表危险。#dc3545
次要背景色。#6c757d
深灰色背景色。#323a40
浅灰色背景色。#f8f9fa
备注
链接颜色 #337AB7
| 英文名 | 中文 | RGB对照 | 示例 |
|---|---|---|---|
| blue | 蓝 | #007bff | ▇▇ |
| cyan | 青 | #17a2b8 | ▇▇ |
| dark | 黑 | #343a40 | ▇▇ |
| gray | 灰 | #6c757d | ▇▇ |
| gray-dark | 灰黑 | #343a40 | ▇▇ |
| green | 绿 | #28a745 | ▇▇ |
| indigo | 靛蓝 | #6610f2 | ▇▇ |
| orange | 橙 | #fd7e14 | ▇▇ |
| pink | 粉 | #e83e8c | ▇▇ |
| purple | 紫 | #6f42c1 | ▇▇ |
| red | 红 | #dc3545 | ▇▇ |
| teal | 蓝绿 | #20c997 | ▇▇ |
| white | 白 | #fff | ▇▇ |
| yellow | 黄 | #ffc107 | ▇▇ |
| – | – | – | – |
| primary | 主要 | #007bff | ▇▇ |
| secondary | 次要 | #6c757d | ▇▇ |
| success | 成功 | #28a745 | ▇▇ |
| info | 信息 | #17a2b8 | ▇▇ |
| warning | 警告 | #ffc107 | ▇▇ |
| danger | 危险 | #dc3545 | ▇▇ |
| light | 浅色 | #f8f9fa | ▇▇ |