Bootstrap4 Colors(カラー)

Bootstrap 4は、いくつかの代表的なカラークラスを提供しています。

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light。

実例

<div class="container">
  <h2>指定された意味を表すテキストのカラー</h2>
  <p class="text-muted">やわらかいテキスト。</p>
  <p class="text-primary">重要なテキスト。</p>
  <p class="text-success">成功で実行したテキスト。</p>
  <p class="text-info">いくつかのプロンプト情報を表すテキスト。</p>
  <p class="text-warning">警告テキスト。</p>
  <p class="text-danger">危険な操作テキスト。</p>
  <p class="text-secondary">サブ(副)タイトル。</p>
  <p class="text-dark">濃い灰色のテキスト。</p>
  <p class="text-light">薄い灰色のテキスト（白い背景でははっきり見えません。</p>
  <p class="text-white">白いテキスト（白い背景でははっきり見えません。</p>
</div>

リンクで使用します

実例

<div class="container">
  <h2>テキストのカラー</h2>
  <p>マウスをリンクに移動する。</p>
  <a href="#" class="text-muted">やわらかいリンク。</a>
  <a href="#" class="text-primary">重要なリンク。</a>
  <a href="#" class="text-success">成功で実行したリンク。</a>
  <a href="#" class="text-info">プロンプト情報を表すリンク。</a>
  <a href="#" class="text-warning">警告リンク。</a>
  <a href="#" class="text-danger">危険なリンク。</a>
  <a href="#" class="text-secondary">サブ(副)タイトルリンク。</a>
  <a href="#" class="text-dark">濃い灰色のリンク。</a>
  <a href="#" class="text-light">薄い灰色のリンク。</a>
</div>

背景色

背景色を提供するクラスは次のとおりです。

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark と .bg-light

背景色はテキストの色を変更しないことに注意してください。場合によっては、.text- *クラスとともに使用する必要があります。

実例

<div class="container">
  <h2>背景色</h2>
  <p class="bg-primary text-white">重要な背景色。</p>
  <p class="bg-success text-white">成功で実行した背景色。</p>
  <p class="bg-info text-white">情報プロンプトの背景色。</p>
  <p class="bg-warning text-white">警告の背景色</p>
  <p class="bg-danger text-white">危険の背景色。</p>
  <p class="bg-secondary text-white">サブ(副)タイトルの背景色。</p>
  <p class="bg-dark text-white">濃い灰色の背景色。</p>
  <p class="bg-light text-dark">薄い灰色の背景色。</p>
</div>