色彩和背景

設定背景色彩，並搭配對比的前景色彩。

在此頁面

概觀

色彩和背景輔助工具結合了我們 .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>