主题引导

使用我们新的内置 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。一些变量设置为null，这些变量不会输出属性，除非它们在您的配置中被覆盖。

同一个 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-pointer-cursor-for-buttons`	`true`（默认）或`false`	将“手”光标添加到非禁用按钮元素。
`$enable-print-styles`	`true`（默认）或`false`	启用样式以优化打印。
`$enable-responsive-font-sizes`	`true`或`false`（默认）	启用响应式字体大小。
`$enable-validation-icons`	`true`（默认）或`false`	启用`background-image`文本输入中的图标和一些用于验证状态的自定义表单。
`$enable-deprecation-messages`	`true`或`false`（默认）	设置为`true`在使用任何计划在`v5`.

颜色

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

所有颜色

All colors available in Bootstrap 4, are available as Sass variables and a Sass map in scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.

Blue

Indigo

Purple

Pink

Red

Orange

Yellow

Green

Teal

Cyan

Here’s how you can use these in your Sass:

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

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

Color utility classes are also available for setting color and background-color.

In the future, we’ll aim to provide Sass maps and variables for shades of each color as we’ve done with the grayscale colors below.

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstraps’s scss/_variables.scss file.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Grays

An expansive set of gray variables and a Sass map in scss/_variables.scss for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.

100

200

300

400

500

600

700

800

900

Within scss/_variables.scss, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the $colors Sass map:

$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;

Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Components

Many of Bootstrap’s components and utilities are built with @each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.

Modifiers

Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn) while style variations are confined to modifier classes (e.g., .btn-danger). These modifier classes are built from the $theme-colors map to make customizing the number and name of our modifier classes.

Here are two examples of how we loop over the $theme-colors map to generate modifiers to the .alert component and all our .bg-* background utilities.

// 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);
}

Responsive

These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an @each loop for the $grid-breakpoints Sass map with a media query include.

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

Should you need to modify your $grid-breakpoints, your changes will apply to all the loops iterating over that map.

CSS variables

Bootstrap 4 includes around two dozen CSS custom properties (variables) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.

Available variables

Here are the variables we include (note that the :root is required). They’re located in our _root.scss file.

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

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.

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

Breakpoint variables

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

以下是不支持的示例：

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

以下是支持的示例：

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