in English

顏色和背景

設置具有對比前景色的背景色。

在本頁面

概述

在 v5.2.0 中添加

顏色和背景助手將我們的.text-*實用程序和.bg-*實用程序的功能結合在一個類中。使用我們的 Sass函數，我們會自動確定特定color-contrast()的對比。colorbackground-color

小心！目前不支持 CSS-native 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>

帶組件

使用它們代替組合.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>