主题化 Bootstrap 和 BootstrapVue

主题化通过 Sass 变量、Sass 映射和自定义 CSS 实现。没有专门的主题样式表；相反，你可以启用内置主题以添加渐变、阴影等。

虽然 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 变量都包含 !default 标志，允许你在自己的 Sass 中覆盖变量的默认值，而无需修改 Bootstrap 和 BootstrapVue 的源 SCSS 代码。根据需要复制并粘贴变量，修改其值，并删除 !default 标志。如果已分配变量，则 Bootstrap 和 BootstrapVue 中的默认值不会重新分配它。

你可以在 bootstrap/scss/_variables.scss 中找到 Bootstrap 变量的完整列表。某些变量设置为 null，这些变量不会输出属性，除非在配置中覆盖它们。

同一 Sass 文件中的变量覆盖可以在默认变量之前或之后进行。但是，在 Sass 文件之间进行覆盖时，覆盖必须在你导入 Bootstrap 和 BootstrapVue 的 Sass (SCSS) 文件之前进行。

以下是一个示例，它在导入和编译 Bootstrap 和 BootstrapVue SCSS 时更改 background-color 和 color 以用于 <body>

// 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 中定义的默认主题颜色如下

主要

次要

成功

危险

警告

信息

浅色

深色

BootstrapVue 组件使用这些默认主题颜色的变体（强度）。

你可以根据需要通过 SASS 变量和映射更改这些主题颜色并创建其他主题颜色。有关更多详细信息，请参阅 Bootstrap 主题文档。所有主题颜色都会自动作为颜色变体提供给所有 BootstrapVue 组件。

SASS 选项

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

Bootstrap SASS 变量

一些常用的 Bootstrap v4 变量是

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

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

BootstrapVue SASS 变量

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

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

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

生成自定义主题

要在 BootstrapVue 中使用您自己的主题和颜色，您需要在项目中创建一个 custom.scss 文件，您可以在主应用程序 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 中使用 scss 时包含 sass 和 sass-loader

npm install --save-dev sass sass-loader

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

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

CSS 变量

Bootstrap 的 SCSS 在已编译的 CSS 中生成大约二十几个 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> 断点特定属性。
有关 Bootstrap 的 SCSS/CSS 主题的更多详细信息，请参阅 官方 Bootstrap v4 主题文档。