主题引导

使用我们新的内置 Sass 变量自定义 Bootstrap 4，以实现全局样式偏好，以便轻松进行主题化和组件更改。

介绍

在 Bootstrap 3 中，主题主要由 LESS 中的变量覆盖、自定义 CSS 和我们包含在dist文件中的单独主题样式表驱动。通过一些努力，可以完全重新设计 Bootstrap 3 的外观，而无需触及核心文件。Bootstrap 4 提供了一种熟悉但略有不同的方法。

现在，主题化由 Sass 变量、Sass 映射和自定义 CSS 完成。不再有专门的主题样式表；相反，您可以启用内置主题来添加渐变、阴影等。

萨斯

利用我们的 Sass 源文件来利用变量、映射、mixin 等。在我们的构建中，我们将 Sass 舍入精度提高到 6（默认为 5），以防止浏览器舍入问题。

文件结构

尽可能避免修改 Bootstrap 的核心文件。对于 Sass，这意味着创建您自己的导入 Bootstrap 的样式表，以便您可以修改和扩展它。假设您使用的是像 npm 这样的包管理器，您将拥有如下所示的文件结构：

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

如果您已经下载了我们的源文件并且没有使用包管理器，那么您需要手动设置类似于该结构的东西，将 Bootstrap 的源文件与您自己的源文件分开。

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

输入

在您的custom.scss中，您将导入 Bootstrap 的源 Sass 文件。你有两个选择：包括所有的 Bootstrap，或者选择你需要的部分。我们鼓励后者，但请注意我们的组件之间存在一些要求和依赖关系。您还需要为我们的插件添加一些 JavaScript。

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

有了这个设置，你就可以开始修改你的custom.scss. 您也可以根据需要开始在该部分下添加部分 Bootstrap // Optional。我们建议使用我们bootstrap.scss文件中的完整导入堆栈作为您的起点。

变量默认值

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

您将在中找到 Bootstrap 变量的完整列表scss/_variables.scss。

同一个 Sass 文件中的变量覆盖可以在默认变量之前或之后。但是，当跨 Sass 文件覆盖时，您的覆盖必须在导入 Bootstrap 的 Sass 文件之前进行。

这是一个在通过 npm 导入和编译 Bootstrap 时更改background-colorandcolor的示例：<body>

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

根据需要对 Bootstrap 中的任何变量重复，包括下面的全局选项。

地图和循环

Bootstrap 4 包含一些 Sass 映射，键值对可以更轻松地生成相关 CSS 族。我们将 Sass 映射用于我们的颜色、网格断点等。就像 Sass 变量一样，所有 Sass 映射都包含!default标志并且可以被覆盖和扩展。

默认情况下，我们的一些 Sass 映射会合并为空映射。这样做是为了方便扩展给定的 Sass 地图，但代价是从地图中删除项目稍微困难一些。

修改地图

要修改我们地图中的现有颜色$theme-colors，请将以下内容添加到您的自定义 Sass 文件中：

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

添加到地图

要向中添加新颜色$theme-colors，请添加新键和值：

$theme-colors: (
  "custom-color": #900
);

从地图中移除

要从$theme-colors或任何其他地图中删除颜色，请使用map-remove。请注意，您必须在我们的要求和选项之间插入它：

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

必需的键

Bootstrap 假设 Sass 映射中存在一些特定的键，因为我们自己使用并扩展了这些键。当您自定义包含的映射时，您可能会遇到使用特定 Sass 映射键的错误。

例如，我们使用链接、按钮和表单状态中的primary、success和danger键。$theme-colors替换这些键的值应该没有问题，但删除它们可能会导致 Sass 编译问题。在这些情况下，您需要修改使用这些值的 Sass 代码。

功能

Bootstrap 使用了几个 Sass 函数，但只有一个子集适用于一般主题。我们包含了三个用于从颜色图中获取值的函数：

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

这些允许您从 Sass 映射中选择一种颜色，就像您使用 v3 中的颜色变量一样。

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

我们还有另一个函数可以从地图中获取特定级别的颜色。$theme-colors负电平值会使颜色变亮，而较高的电平值会变暗。

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

在实践中，您将调用该函数并传入两个参数：颜色的名称$theme-colors（例如，主要或危险）和数字级别。

.custom-element {
  color: theme-color-level(primary, -10);
}

将来可以添加其他功能，或者您自己的自定义 Sass 来为其他 Sass 地图创建关卡功能，如果您想要更详细，甚至可以使用通用功能。

颜色对比

我们在 Bootstrap 中包含的一项附加功能是颜色对比功能，color-yiq. 它利用YIQ 颜色空间根据指定的基色自动返回浅色 ( #fff) 或深色 ( #111) 对比色。此函数对于生成多个类的混合或循环特别有用。

例如，要从我们的$theme-colors地图生成色样：

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

它也可用于一次性对比需求：

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

您还可以使用我们的颜色映射函数指定基色：

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

萨斯选项

使用我们内置的自定义变量文件自定义 Bootstrap 4，并使用新的$enable-*Sass 变量轻松切换全局 CSS 首选项。覆盖变量的值并npm run test根据需要重新编译。

scss/_variables.scss您可以在 Bootstrap 的文件中为关键的全局选项找到并自定义这些变量。

多变的	价值观	描述
`$spacer`	`1rem`（默认），或任何值 > 0	指定默认间隔值以编程方式生成我们的间隔实用程序。
`$enable-rounded`	`true`（默认）或`false`	在各种组件上启用预定义`border-radius`样式。
`$enable-shadows`	`true`或`false`（默认）	在各种组件上启用预定义`box-shadow`样式。
`$enable-gradients`	`true`或`false`（默认）	`background-image`通过各种组件上的样式启用预定义渐变。
`$enable-transitions`	`true`（默认）或`false`	`transition`在各种组件上启用预定义的 s。
`$enable-prefers-reduced-motion-media-query`	`true`（默认）或`false`	启用`prefers-reduced-motion`媒体查询，它会根据用户的浏览器/操作系统首选项抑制某些动画/过渡。
`$enable-hover-media-query`	`true`或`false`（默认）	已弃用
`$enable-grid-classes`	`true`（默认）或`false`	允许为网格系统生成 CSS 类（例如、、`.container`等）。`.row.col-md-1`
`$enable-caret`	`true`（默认）或`false`	在上启用伪元素插入符号`.dropdown-toggle`。
`$enable-print-styles`	`true`（默认）或`false`	启用样式以优化打印。
`$enable-validation-icons`	`true`（默认）或`false`	启用`background-image`文本输入中的图标和一些用于验证状态的自定义表单。

颜色

许多 Bootstrap 的各种组件和实用程序都是通过在 Sass 映射中定义的一系列颜色构建的。这张地图可以在 Sass 中循环，快速生成一系列规则集。

所有颜色

Bootstrap 4 中可用的所有颜色都可以作为 Sass 变量和scss/_variables.scss文件中的 Sass 映射使用。这将在后续的次要版本中扩展以添加额外的阴影，就像我们已经包含的灰度调色板一样。

蓝色的

靛青

紫色的

粉色的

红色的

橙子

黄色

绿色的

蓝绿色

青色

以下是在 Sass 中使用这些的方法：

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

颜色实用程序类也可用于设置color和background-color。

将来，我们的目标是为每种颜色的阴影提供 Sass 映射和变量，就像我们对下面的灰度颜色所做的那样。

主题颜色

我们使用所有颜色的子集来创建一个较小的调色板来生成配色方案，也可以作为 Sass 变量和 Bootstrapsscss/_variables.scss文件中的 Sass 映射。

基本的

中学

成功

危险

警告

信息

光

黑暗的

格雷斯

一组广泛的灰色变量和一个 Sass 映射，scss/_variables.scss用于在您的项目中实现一致的灰色阴影。请注意，这些是“冷灰色”，倾向于微妙的蓝色调，而不是中性灰色。

100

200

300

400

500

600

700

800

900

在scss/_variables.scss中，您会找到 Bootstrap 的颜色变量和 Sass 映射。$colors这是Sass 映射的示例：

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

在地图中添加、删除或修改值以更新它们在许多其他组件中的使用方式。不幸的是，目前并不是每个组件都使用这个 Sass 映射。未来的更新将努力改进这一点。在那之前，计划使用${color}变量和这个 Sass 映射。

成分

Bootstrap 的许多组件和实用程序都是用@each遍历 Sass 映射的循环构建的。这对于我们生成组件的$theme-colors变体以及为每个断点创建响应变体特别有用。当您自定义这些 Sass 映射并重新编译时，您将自动看到您的更改反映在这些循环中。

修饰符

Bootstrap 的许多组件都是使用基本修饰符类方法构建的。这意味着大部分样式都包含在基类中（例如，.btn），而样式变化仅限于修饰符类（例如，.btn-danger）。这些修饰符类是从$theme-colors地图构建的，以自定义修饰符类的数量和名称。

$theme-colors以下是我们如何循环地图以生成.alert组件和所有.bg-*后台实用程序的修饰符的两个示例。

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

响应式

这些 Sass 循环也不限于彩色地图。您还可以生成组件或实用程序的响应式变体。以我们的响应式文本对齐实用程序为例，我们将Sass 映射的@each循环与媒体查询包括在内。$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

如果您需要修改$grid-breakpoints，您的更改将应用于遍历该地图的所有循环。

CSS 变量

Bootstrap 4在其编译的 CSS 中包含大约两打CSS 自定义属性（变量）。在浏览器的检查器、代码沙箱或一般原型设计中工作时，这些提供了对常用值的轻松访问，例如我们的主题颜色、断点和主要字体堆栈。

可用变量

这是我们包含的变量（请注意，这:root是必需的）。它们位于我们的_root.scss文件中。

: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;
}

例子

CSS 变量提供了与 Sass 的变量类似的灵活性，但在提供给浏览器之前不需要编译。例如，这里我们使用 CSS 变量重置页面的字体和链接样式。

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

断点变量

虽然我们最初在 CSS 变量中包含断点（例如，--breakpoint-md），但媒体查询不支持这些断点，但它们仍然可以在媒体查询的规则集中使用。这些断点变量保留在编译后的 CSS 中以实现向后兼容性，因为它们可以被 JavaScript 使用。在规范中了解更多信息。

以下是不支持的示例：

@media (min-width: var(--breakpoint-sm)) {
  ...
}

以下是支持的示例：

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}