カラーバリエーションとCSSクラスのマッピング

基本バリエーション

• primary - プライマリ
• secondary - セカンダリ
• success - 成功
• warning - 警告
• danger - 危険
• info - 情報
• light - ライト
• dark - ダーク

基本バリエーションは、使用されるコンポーネント（およびバリエーションの目的）に基づいて、さまざまなBootstrap v4コンテキストクラス名に変換されます。詳細は以下のセクションを参照してください。

背景とボーダーのバリエーション

すべての**基本バリエーション**に加えて

• ホワイト
• トランスペアレント

これらは、背景の場合はbg-{variant}、ボーダーの場合はborder-{variant}というクラス名に変換されます。

これらのバリエーションは、<b-card>、<b-jumbotron>、<b-modal>など、bg-variant、*-bg-variant、border-variant、*-border-variantのプロパティを提供するコンポーネントで使用されます。

テキストのバリエーション

すべての**基本バリエーション**に加えて

• ミュート
• ホワイト
• ブラック

これらはtext-{variant}というクラス名に変換されます。

これらのバリエーションは、<b-card>、<b-jumbotron>、<b-modal>など、text-variantおよび*-text-variantのプロパティを提供するコンポーネントで使用されます。

コンポーネント固有のバリエーション

一部のBootstrap v4コンポーネントでは、追加のCSSスタイル、または追加の擬似セレクタースタイル（つまりボタン）が必要なため、独自の基盤となるバリエーションCSSクラスがあります。

アラートのバリエーション

すべての**基本バリエーション**

これらはalert-{variant}というクラス名に変換されます。

バッジのバリエーション

すべての**基本バリエーション**

これらはbadge-{variant}というクラス名に変換されます。

ボタンのバリエーション

すべての**基本バリエーション**に加えて

• outline-{base variant} は、基本バリエーションのアウトラインボタンバージョンを生成します。
• link は、リンクのように表示されるボタンをレンダリングしますが、ボタンのパディングとマージンは保持されます。

これらはbtn-{variant}とbtn-outline-{variant}というクラス名に変換されます。

linkバリエーションには、アウトラインバージョンがないことに注意してください。

テーブルのバリエーション

すべての**基本バリエーション**に加えて

• アクティブ

これらのバリエーションはtable-{variant}というクラス名に変換されます。

テーブルにdarkプロパティが設定されている場合、バリエーションはbg-{variant}クラスに変換されます。

activeバリエーションは<tbody>内の<tr>要素にのみ適用可能であり、個々のテーブルセルに適用したり、table-variantとして使用することはできません。

ポップオーバーのバリエーション

すべての**基本バリエーション**

これらはBootstrapVueのカスタムクラス名b-popover-{variant}に変換されます。

ツールチップのバリエーション

すべての**基本バリエーション**

これらはBootstrapVueのカスタムクラス名b-tooltip-{variant}に変換されます。

トーストのバリエーション

すべての**基本バリエーション**

これらはBootstrapVueのカスタムクラス名b-toast-{variant}に変換されます。

バリエーションクラスの使用

標準HTMLのclass="..."属性を使用して、基盤となるクラス名を要素（および一部のコンポーネント）に直接使用することもできます。

カスタムバリエーションの作成

カスタムバリエーションを作成する場合は、Bootstrap v4バリエーションCSSクラスの命名スキームに従ってください。そうすることで、そのスキームを使用するさまざまなコンポーネントで使用できるようになります（つまり、カスタムCSSクラスbtn-purpleとpurpleを作成すると、<b-button>で使用できる有効なバリエーションになります）。

あるいは、カスタムBootstrap SCSSテーマカラーマップを提供することで、新しいバリエーションテーマカラーを作成することもできます。デフォルトのテーマカラーマップは（bootstrap/scss/_variables.scssから）

// Base grayscale colors definitions
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

// Base colors definitions
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;

// Theme color default definitions
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;

// This table defines the theme colors (variant names)
$theme-colors: () !default;
$theme-colors: map-merge(
  (
    'primary': $primary,
    'secondary': $secondary,
    'success': $success,
    'info': $info,
    'warning': $warning,
    'danger': $danger,
    'light': $light,
    'dark': $dark
  ),
  $theme-colors
);

BootstrapとBootstrapVueのスタイルのカスタマイズの詳細については、テーマセクションを参照してください。