颜色和背景

设置具有对比前景色的背景色。

此页面上

概述

颜色和背景帮助程序将我们 .text-* 实用程序和 .bg-* 实用程序的功能组合在一个类中。使用我们的 Sass color-contrast() 函数，我们可以自动确定特定 background-color 的对比 color。

注意！目前不支持 CSS 原生的 color-contrast 函数，因此我们通过 Sass 使用我们自己的函数。这意味着通过 CSS 变量自定义我们的主题颜色可能会导致这些实用程序出现颜色对比问题。

具有对比色的主色

具有对比色的辅助色

具有对比色的成功色

具有对比色的危险色

具有对比色的警告色

具有对比色的信息色

具有对比色的浅色

具有对比色的深色

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

无障碍提示：仅使用颜色添加含义只会提供视觉指示，屏幕阅读器等辅助技术的用户无法理解。请确保含义从内容本身（例如，具有足够颜色对比度的可见文本）中显而易见，或通过其他方式（例如，使用 .visually-hidden 类隐藏的附加文本）包含。

带有组件

在徽章中使用它们，取代组合的 .text-* 和 .bg-* 类，如徽章

主要信息

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

或在卡片中

标题

一些快速示例文本，以构建卡片标题并构成卡片内容的大部分。

标题

一些快速示例文本，以构建卡片标题并构成卡片内容的大部分。

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>