in English

色

Bootstrap は、スタイルとコンポーネントをテーマとする広範なカラーシステムによってサポートされています。これにより、あらゆるプロジェクトのより包括的なカスタマイズと拡張が可能になります。

このページでは

テーマの色

すべての色のサブセットを使用して、配色を生成するための小さなカラーパレットを作成します。これは、Bootstrap のscss/_variables.scssファイルで Sass 変数および Sass マップとしても利用できます。

主要な

セカンダリ

成功

危険

警告

情報

光

暗い

これらの色はすべて、Sass マップとして利用できます$theme-colors。

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

これらの色を変更する方法については、Sass マップとループのドキュメントをご覧ください。

全ての色

Bootstrap のすべての色は、ファイル内の Sass 変数および Sass マップとして利用できscss/_variables.scssます。ファイルサイズの増加を避けるため、これらの変数ごとにテキストまたは背景色のクラスを作成しません。代わりに、これらの色のサブセットをテーマパレットに選択します。

色をカスタマイズするときは、必ずコントラスト比を監視してください。以下に示すように、各メインカラーに 3 つのコントラスト比を追加しました。1 つはスウォッチの現在の色用、もう 1 つは対白用、もう 1 つは対黒用です。

$青#0d6efd

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$インディゴ#6610f2

$インディゴ-100

$インディゴ-200

$インディゴ-300

$インディゴ-400

$インディゴ-500

$インディゴ-600

$インディゴ-700

$インディゴ-800

$インディゴ-900

$紫#6f42c1

$紫-100

$紫-200

$紫-300

$紫-400

$紫-500

$紫-600

$紫-700

$紫-800

$紫-900

$ピンク#d63384

$ピンク-100

$ピンク-200

$ピンク-300

$ピンク-400

$ピンク-500

$ピンク-600

$ピンク-700

$ピンク-800

$ピンク-900

$レッド#dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$オレンジ#fd7e14

$オレンジ-100

$オレンジ-200

$オレンジ-300

$オレンジ-400

$オレンジ-500

$オレンジ-600

$オレンジ-700

$オレンジ-800

$オレンジ-900

$イエロー#ffc107

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$黄色-500

$yellow-600

$yellow-700

$黄色-800

$yellow-900

$グリーン#198754

$green-100

$green-200

$green-300

$green-400

$green-500

$green-600

$green-700

$グリーン-800

$green-900

$ティール#20c997

$ティール-100

$ティール-200

$ティール-300

$ティール-400

$ティール-500

$ティール-600

$ティール-700

$ティール-800

$ティール-900

$シアン#0dcaf0

$シアン-100

$シアン-200

$シアン-300

$シアン-400

$シアン-500

$シアン-600

$シアン-700

$シアン-800

$シアン-900

$グレー-500#adb5bd

$グレー-100

$グレイ-200

$グレイ-300

$グレイ-400

$グレー-500

$グレイ-600

$グレイ-700

$グレイ-800

$グレイ-900

$ブラック#000

$白#fff

サスに関する注意事項

Sass はプログラムで変数を生成できないため、すべてのティントとシェーディングの変数を自分で手動で作成しました。中間値 (例: $blue-500) を指定し、カスタムカラー関数を使用して、Sass のmix()カラー関数を介して色を濃く (明るく) したり、陰影 (暗く) したりします。

and の使用mix()はlighten()and とはdarken()異なります。前者は指定された色を白または黒とブレンドしますが、後者は各色の明度値を調整するだけです。この CodePen デモに示されているように、結果はより完全な色のスイートになります。

tint-color()および関数は、生成する混合色ごとに段階的なパーセンテージ値を指定する変数と一緒にshade-color()使用します。完全なソースコードについては、およびファイルを参照してください。mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

カラー Sass マップ

Bootstrap のソース Sass ファイルには 3 つのマップが含まれており、色とその 16 進値のリストをすばやく簡単にループできます。

$colors500利用可能なすべてのベース ( ) 色をリストします
$theme-colors意味的に名前が付けられたすべてのテーマの色を一覧表示します (以下を参照)
$graysすべての色合いとグレーの色合いをリストします

内scss/_variables.scssには、Bootstrap の色変数と Sass マップがあります。$colorsSass マップの例を次に示します。

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

マップ内の値を追加、削除、または変更して、他の多くのコンポーネントでの使用方法を更新します。残念ながら、現時点では、すべてのコンポーネントがこの Sass マップを利用しているわけではありません。今後のアップデートでは、これを改善するよう努めます。それまでは、${color}変数とこの Sass マップを利用する計画を立ててください。

例

これらを Sass で使用する方法は次のとおりです。

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

色と背景のユーティリティクラスも、色の値を設定colorおよびbackground-color使用するために使用できます。500

ユーティリティの生成

v5.1.0 で追加

Bootstrap にはすべての色変数のユーティリティが含まれているわけではありませんが、ユーティリティ API と v5.1.0 で追加された拡張 Sass マップを使用してこれらを自分でcolor生成できます。background-color

まず、関数、変数、ミックスイン、ユーティリティがインポートされていることを確認してください。
関数を使用して、map-merge-multiple()複数の Sass マップを新しいマップにすばやくマージします。
この新しい結合マップをマージして、{color}-{level}クラス名を持つユーティリティを拡張します。

.text-purple-500上記の手順を使用してテキストカラーユーティリティ (例: ) を生成する例を次に示します。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}これにより、すべての色とレベルに対して新しいユーティリティが生成されます。他のユーティリティとプロパティについても同じことができます。