主题色彩

方便的通过SASS变量来定义CSS，虽然BoostrapV4默认不内置专门的主题文件，但你可以通过不同的参数来实现渐变、阴影等变化。

虽然BootstrapVue使用Bootstrap的CSS，但BootstrapVue的某些功能使用自定义CSS（即堆叠表等）。我们的自定义CSS依赖于Bootstrap v4.x SCSS定义的变量。 bootstrap-vue/dist/bootstrap-vue.css使用默认的Bootstrap v4.x变量进行编译。通过使用BootstrapVue源SCSS，您可以让变量覆盖（例如断点，主题颜色等）调整自定义BootstrapVue css的生成。

SASS 变量默认值

Bootstrap v4和BootstrapVue中的每个Sass变量都包括！默认标志允许您在自己的Sass中重写变量的默认值，而无需修改Bootstrap和BootstrapVue的源SCSS代码。根据需要复制和粘贴变量，修改它们的值，然后删除！默认标志。如果变量已经被赋值，那么它将不会被Bootstrap和BootstrapVue中的默认值重新赋值。

您将在bootstrap/scss/_variables.scss中找到引导程序变量的完整列表。有些变量设置为null，除非在配置中重写这些变量，否则这些变量不会输出属性。

同一Sass文件中的变量重写可以在默认变量之前或之后进行。但是，在跨Sass文件重写时，必须在导入Bootstrap和BootstrapVue的Sass（SCSS）文件之前进行重写。

下面的示例在导入和编译Bootstrap和BootstrapVue SCSS时更改<body>的background-color和 color ：

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import '../node_modules/bootstrap/scss/bootstrap';
// BootstrapVue and its default variables
@import '../node_modules/bootstrap-vue/src/index.scss';

默认主题颜色

Bootstrap v4.4 SCSS中定义的默认颜色如下：

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

各种组件将使用这些默认主题颜色的变量（强度）。

您可以根据需要通过SASS变量和贴图更改主题颜色，并创建其他主题颜色。有关更多详细信息，请参考Bootstrap 主题文档。所有主题颜色将自动作为所有BootstrapVue组件的color 变量提供。

SASS 选项

使用内置的自定义变量文件自定义Bootstrap 4，并使用Bootstrap的$enable-*Sass变量轻松切换全局CSS首选项。

Bootstrap SASS 变量

一些常用的Bootstrap v4变量是：

变量	类型	默认值	描述
`$enable-rounded`	Boolean	`true`	在各种组件上启用预定义的`border-radius`样式
`$enable-shadows`	Boolean	`false`	在各种组件上启用预定义的`box-shadow`样式
`$enable-gradients`	Boolean	`false`	通过各种组件上的`background-image` 样式启用预定义的渐变
`$enable-transitions`	Boolean	`true`	在各种组件上启用预定义的`transition`
`$enable-responsive-font-sizes`	Boolean	`false`	启用responsive font sizes
`$enable-validation-icons`	Boolean	`true`	启用文本输入中的`background-image`图标和一些用于验证状态的自定义表格

有关更多Bootstrap v4变量信息，请参阅Bootstrap的主题化文档。

BootstrapVue SASS 变量

BootstrapVue还定义了几个Sass变量来控制BootstrapVue的自定义CSS生成。如果您不在项目中使用这些功能，则可以禁用该功能的CSS生成，以减小BootstrapVue的自定义CSS包的大小：

变量	类型	默认值	描述
`$bv-enable-table-stacked`	Boolean	`true`	启用堆叠表格CSS生成
`$bv-enable-table-sticky`	Boolean	`true`	启用粘性表标题和列CSS生成
`$bv-enable-tooltip-variants`	Boolean	`true`	启用工具提示变量CSS生成
`$bv-enable-popover-variants`	Boolean	`true`	启用弹出变体CSS生成

您可以在bootstrap-vue/src/_variables.scss 中找到控制BootstrapVue自定义CSS各个方面的其他变量。注意，BootstrapVue的自定义scs依赖于Bootstrap的SASS变量、函数和mixin。

生成自定义主题

要在BootstrapVue中使用自己的主题和颜色，需要在项目中创建一个custom.scss文件，该文件可以包含在主app app.vue文件中：

通过模板:

<style lang="scss">
  // Import custom SASS variable overrides, or alternatively
  // define your variable overrides here instead
  @import 'assets/custom-vars.scss';

  // Import Bootstrap and BootstrapVue source SCSS files
  @import '~bootstrap/scss/bootstrap.scss';
  @import '~bootstrap-vue/src/index.scss';

  // General style overrides and custom classes
  body {
    margin: 0;
  }

  .my-widget {
    color: var(--danger);
  }
  // ...
</style>

需要在Bootstrap的SCSS和BootstrapVue的SCSS之前加载的custom-vars.scss文件将包含Bootstrap v4变量覆盖（即颜色，阴影，字体大小，断点等）。

通过应用主入口：

使用自定义主题变量创建一个SCSS文件，该文件还将导入Bootstrap和BootstrapVue的SCSS：

// File: custom.scss

// Define your variable overrides here
$enable-shadows: true;
$enable-gradients: true;
$grid-breakpoints: (
  xs: 0,
  sm: 456px,
  md: 789px,
  lg: 999px,
  xl: 1234px
);
$bv-enable-table-stacked: false;

// Include Bootstrap and BootstrapVue SCSS files
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

// General style overrides and custom classes
body {
  margin: 0;
}

.my-widget {
  color: var(--danger);
}
// ...

然后将单个SCSS文件导入到主应用程序代码入口点：

import 'custom.scss'

您可以在node_modules/bootstrap/scss/_variables.scss中找到所有可能的变量。

不要忘记在Vue中包含node-sass和 sass-loader 来使用scss：

npm install --save-dev node-sass sass-loader

注意: 您可能需要根据您的构建环境调整SCSS导入路径。

有关创建自定义主题颜色的示例，请参见颜色变量参考页面中的创建自定义变量部分。

CSS 变量

Bootstrap的s CSS在编译的CSS中生成大约24个CSS自定义属性（变量）。当在浏览器的检查器、代码沙盒或常规原型中工作时，这些选项提供了对常用值（如主题颜色、断点和主字体堆栈）的轻松访问。

可用的 Bootstrap CSS 变量

可用的Bootstrap CSS变量这里是生成的CSS变量。显示的值基于Bootstrap v4的默认值：

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
}

通过设置SASS变量和映射，并重新编译SCSS，上面生成的SCSS变量也将被更新。

例子

CSS变量提供了与SASS变量类似的灵活性，但无需先进行编译即可提供给浏览器。例如，在这里我们要重置页面的字体和链接样式，并通过使用CSS变量来创建使用主题颜色的自定义类。

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}

a {
  color: var(--blue);
}

.custom-class {
  color: var(--primary);
  background-color: var(--dark);
}

另请参阅

如果要定义自定义断点名称，请参阅BootstrapVue 设置页面，以了解如何更新BootstrapVue <b-col>和 <b-form-group>断点专用属性。
有关引导程序的 SCSS/CSS主题化的更多详细信息，请参阅官方引导v4主题文档。