メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

文字&背景色ヘルパー(Color & background) v5.2.0新設

コントラストが対照的な文字色と背景色を一括で設定する。

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。
このページの項目

概要(Overview)

文字&背景色ヘルパーは、.text-* ユーティリティ.bg-* ユーティリティの機能を1つのクラスにまとめたもの。Sassの color-contrast() 関数を使用して、特定の background-color のコントラスト color を自動的に決定。

色の種類
高いコントラストのPrimary.text-bg-primary(= .text-white.bg-primary
高いコントラストのSecondary.text-bg-secondary(= .text-white.bg-secondary
高いコントラストのSuccess.text-bg-success(= .text-white.bg-success
高いコントラストのDanger.text-bg-danger(= .text-white.bg-danger
高いコントラストのWarning.text-bg-warning(= .text-black.bg-warning
高いコントラストのInfo.text-bg-info(= .text-black.bg-info
高いコントラストのLight.text-bg-light(= .text-black.bg-light
高いコントラストのDark.text-bg-dark(= .text-white.bg-dark
設定例
<div class="text-bg-primary p-3">...</div>
【設定】
  • <div><span> などの要素に .text-bg-{themecolor}(上記の「色の種類」から選択)を入れる
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択

コンポーネント付き(With components)

1.バッジで使用

バッジのように、.text-* クラスと .bg-* クラスを組み合わせる代わりに使用。

見本
Primary Info
設定例
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

2.カードで使用

カードでも同様に使用。

見本
ヘッダ

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

ヘッダ

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

設定例
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">ヘッダ</div>
  <div class="card-body">
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">ヘッダ</div>
  <div class="card-body">
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
  </div>
</div>
【設定】

Sass

デフォルトの設定
scss/helpers/_color-bg.scss の設定@each $color, $value in $theme-colors {
  $color-rgb: to-rgb($value);
  .text-bg-#{$color} {
    color: color-contrast($value) if($enable-important-utilities, !important, null);
    background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
  }
}