颜色
通过少数颜色实用程序类通过颜色传达含义。 还包括对具有悬停状态的样式链接的支持。
处理特异性
有时由于另一个选择器的特殊性,无法应用上下文类。 在某些情况下,一种足够的解决方法是将元素的内容包装在 <div> 与班级。
向辅助技术传达意义
使用颜色添加含义仅提供视觉指示,而不会传达给辅助技术的用户（例如屏幕阅读器）。 确保用颜色表示的信息从内容本身来看是显而易见的（例如 可见的文字）,或通过其他方式（例如, .sr-only 类。
颜色
.text-primary
.text-secondary
.text成功
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
<p class="text-primary"> .text-primary </p>
<p class="text-secondary"> .text-secondary </p>
<p class="text-success"> .text成功 </p>
<p class="text-danger"> .text-danger </p>
<p class="text-warning"> .text-warning </p>
<p class="text-info"> .text-info </p>
<p class="text-light bg-dark"> .text-light </p>
<p class="text-dark"> .text-dark </p>
<p class="text-body"> .text-body </p>
<p class="text-muted"> .text-muted </p>
<p class="text-white bg-dark"> .text-white </p>
<p class="text-black-50"> .text-black-50 </p>
<p class="text-white-50 bg-dark"> .text-white-50 </p>上下文文本类在具有提供的悬停和焦点状态的锚点上也可以很好地工作。 请注意 .text-white and .text-muted 除下划线外,该类没有其他链接样式。
<p><a class="text-primary" href="#"> 主要连结 </a></p>
<p><a class="text-secondary" href="#"> 次要连结 </a></p>
<p><a class="text-success" href="#"> 成功链接 </a></p>
<p><a class="text-danger" href="#"> 危险链接 </a></p>
<p><a class="text-warning" href="#"> 警告链接 </a></p>
<p><a class="text-info" href="#"> 信息链接 </a></p>
<p><a class="text-light bg-dark" href="#"> 轻链接 </a></p>
<p><a class="text-dark" href="#"> 暗链接 </a></p>
<p><a class="text-muted" href="#"> 静音链接 </a></p>
<p><a class="text-white bg-dark" href="#"> 白色链接 </a></p>背景颜色
与上下文文本颜色类相似,可以轻松地将元素的背景设置为任何上下文类。 锚点组件会像文本类一样在悬停时变暗。 后台实用程序 不要设置 color ,因此在某些情况下,您需要使用 .text-* 公用事业。
.bg-primary
.bg-secondary
.bg成功
.bg-危险
.bg警告
.bg-info
.bg-light
.bg-暗
.bg-白色
.bg透明
<div class="p-3 mb-2 bg-primary text-white"> .bg-primary </div>
<div class="p-3 mb-2 bg-secondary text-white"> .bg-secondary </div>
<div class="p-3 mb-2 bg-success text-white"> .bg成功 </div>
<div class="p-3 mb-2 bg-danger text-white"> .bg-危险 </div>
<div class="p-3 mb-2 bg-warning text-dark"> .bg警告 </div>
<div class="p-3 mb-2 bg-info text-white"> .bg-info </div>
<div class="p-3 mb-2 bg-light text-dark"> .bg-light </div>
<div class="p-3 mb-2 bg-dark text-white"> .bg-暗 </div>
<div class="p-3 mb-2 bg-white text-dark"> .bg-白色 </div>
<div class="p-3 mb-2 bg-transparent text-dark"> .bg透明 </div>背景渐变
When $enable-gradients 设定为 true （默认为 false ）, 您可以使用 .bg-gradient- 实用程序类。 了解我们的Sass选项 启用这些类以及更多。
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
