色と背景 Color and background

コントラストのある前景色と背景色を設定します。

On this page

概要

色と背景のヘルパーは、.text-*ユーティリティと.bg-*ユーティリティの力を1つのクラスに組み合わせます。Sassのcolor-contrast()関数を使用して、特定のbackground-colorに対してコントラストのあるcolorを自動的に決定します。

注意！ 現在、CSS nativeのcolor-contrast関数のサポートはないため、Sass経由で独自の関数を使用しています。これは、CSS変数を介してテーマカラーをカスタマイズすると、これらのユーティリティで色のコントラストの問題が発生する可能性があることを意味します。

Primary with contrasting color

Secondary with contrasting color

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Dark with contrasting color

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クラスで非表示にした追加テキストなどの代替手段を通じて含めてください。

コンポーネントと一緒に使用

badgesのように、組み合わされた.text-*と.bg-*クラスの代わりに使用します：

Primary Info

html

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

またはcardsで：

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

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>