颜色变量 Color variants and CSS class mapping

基于 Bootstrap v4 默认的 CSS 及颜色变量.

基础变量

  • primary - Primary
  • secondary - secondary
  • success - Success
  • warning - Warning
  • danger - Danger
  • info - Info
  • light - Light
  • dark - Dark

基本变量将根据使用它们的组件（和变量用途）转换为各种Bootstrap v4上下文类名。有关详细信息，请参阅以下各节。

背景和边框变量

所有基础变量:

  • 透明的

这些转换为背景的类名称bg-{variant}， 而边界转换为border-{variant}。

这些变量由提供bg-variant, *-bg-variant, border-variant和 *-border-variant属性的组件（如<b-card>, <b-jumbotron>, <b-modal>等）使用。

文本变量

所有基础变量:

  • muted
  • white
  • black

这些转换为类名text-{variant}

这些变量由提供text-variant和*-text-variant属性的组件（例如<b-card>, <b-jumbotron>, <b-modal>等）使用。

组件特定的变量

一些Bootstrap v4组件需要其他CSS样式或其他伪选择器样式（即按钮），因此具有自己的基础变体CSS类。

Alert 变量

所有基础变量

这些转换为类名称alert-{variant}.

Badge 变量

所有基础变量

这些转换为类名称badge-{variant}.

Button 变量

所有基础变量:

  • outline-{base variant} 生成基变量的outline按钮版本
  • link该按钮使按钮具有链接外观，但保留按钮填充和边距

这些转换为类名称btn-{variant}和btn-outline-{variant}。

请注意，link变量没有大纲版本。

Table 变量

所有基本变量:

  • active

这些变量转换为类名table-{variant}.

当表设置了dark属性时，变量将转换为bg-{variant}类。

请注意，active变量仅适用于 <tbody>中的<tr>元素， 不能应用于单个表单元格或用作table-variant。

Popover 变量

所有基础变量

这些转换为BootstrapVue自定义类名称 b-popover-{variant}.

Tooltip 变量

All the base variants

这些转换为BootstrapVue自定义类名称 b-tooltip-{variant}.

Toast 变量

All the base variants

这些转换为BootstrapVue自定义类名称 b-toast-{variant}.

使用变量类

您还可以通过标准HTML class="..."属性直接在元素（和某些组件）上使用底层类名。

创建自定义变量

创建自定义变量时，遵循Bootstrap v4 variant CSS类命名方案，它们将对使用该方案的各个组件可用（即， 创建自定义CSS类btn-purple和 purple将成为可在<b-button>上使用的有效变量）。

或者，您可以通过提供自定义引导SCSS-them颜色映射来创建新的变量主题颜色。默认的主题颜色映射是（来自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
);

有关自定义引导和引导样式的详细信息，请参阅主题部分。