颜色变体和 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 变体没有轮廓版本。

表格变体

所有基本变体加上

• active

这些变体转换为类名 table-{variant}。

当表格设置了 dark 属性时，这些变体转换为 bg-{variant} 类。

请注意，active 变体仅适用于 <tr> 元素（在 <tbody> 内），不能应用于各个表格单元格或用作 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 样式的详细信息，请参阅主题部分。