顏色變形和 CSS 類別對應

基礎變形

• primary - 主要
• secondary - 次要
• success - 成功
• warning - 警告
• danger - 危險
• info - 資訊
• light - 淺色
• dark - 深色

基礎變形會轉換為各種 Bootstrap v4 背景類別名稱，具體取決於它們所在組件（和變形用途）。請參閱以下各節中的詳細資訊。

背景和邊框的變體

除了全部的基礎變體之外，還有

• 白色
• 透明

這些會轉換為背景的類別名稱 bg-{變體}，以及邊框的 border-{變體}。

這些變體會在某些元件（例如 <b-card>、<b-jumbotron>、<b-modal> 等）提供 bg-variant、*-bg-variant、border-variant 和 *-border-variant 屬性。

文字的變體

除了全部的基礎變體之外，還有

• muted
• 白色
• black

這些會轉換為類別名稱 text-{變體}。

這些變體會在某些元件（例如 <b-card>、<b-jumbotron>、<b-modal> 等）提供 text-variant 和 *-text-variant 屬性。

元件特定的變體

Bootstrap v4 的某些元件需要額外的 CSS 樣式，或需要額外的偽選取器樣式（例如按鈕），因此它們有自己底層的變體 CSS 類別。

警示變體

全部的基礎變體

這些會轉換為類別名稱 alert-{變體}。

徽章變體

全部的基礎變體

這些會轉換為類別名稱 badge-{變體}。

按鈕變體

除了全部的基礎變體之外，還有

• outline-{基本變體} 會產生基本變體的輪廓按鈕版本
• link 會讓按鈕呈現連結的外觀，但會保留按鈕的內距和外距

這些會轉換為類別名稱 btn-{變體} 和 btn-outline-{變體}。

請注意 link 變體沒有輪廓版本。

表格變體

除了全部的基礎變體之外，還有

• active

這些變體會轉換為類別名稱 table-{變體}。

如果表格有設定 dark 屬性，則這些變體會轉換為 bg-{變體} 類別。

請注意，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 樣式的詳細資料。