View on GitHub

主题 Bootstrap

使用我们新的内置Sass变量自定义Bootstrap 4，以实现全局样式首选项，以方便主题化和组件更改。

介绍

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

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

Sass

在使用您自己的资产管道编译 Sass 时，利用我们的源Sass文件来使用变量、映射、mixin等。

文件结构

尽可能避免修改 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";

// Add custom code after this

// 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";

// Include custom variable default overrides here

// 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中开始修改数据库中的任何Sass变量和映射了。您还可以根据需要开始在// Optional 部分下添加Bootstrap的一部分。我们建议使用bootstrap.scss文件中的完整导入堆栈作为起点。

可变默认值

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

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

变量重写必须在导入函数、变量和mixin之后，但在其余导入之前进行。

下面是一个通过npm导入和编译Bootstrap时更改<body>的background-color 和 color ：

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

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

// Bootstrap and its default variables

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

对Bootstrap中的任何变量（包括下面的全局选项）进行必要的重写。

通过npm和我们的入门项目开始使用Bootstrap！ 前往 twbs/bootstrap-npm-starter 初学者模板库，了解如何在自己的npm项目中构建和定制 Bootstrap。包括Sass编译器、Autoprefixer、Stylelint、PurgeCSS和 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映射的键时可能会遇到错误。

例如，我们使用$theme-colors 中的 primary、 success 和 danger 键作为链接、按钮和窗体状态。替换这些键的值不会出现问题，但是删除它们可能会导致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 的颜色名称（例如primary或danger）和数字级别。

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

将来可以添加其他函数或您自己的自定义SAS，为其他Sass映射创建级别函数，如果您想更详细，甚至可以创建通用SAS映射。

颜色对比

我们在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`
}

转义 SVG

我们使用 escape-svg 函数对svg背景图像的<、 > 和 # 字符进行转义。这些字符需要转义才能正确呈现IE中的背景图像。使用 escape-svg 函数时，必须引用数据URI。

加减函数

我们使用 add 和 subtract 函数包装CSS calc函数。这些函数的主要目的是避免将“无单位” 0 值传递到 calc 表达式时出错。像 calc(10px - 0) 这样的表达式在所有浏览器中都会返回一个错误，尽管在数学上是正确的。

计算有效的示例：

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

计算无效的示例：

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass 选项

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

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

变量	值	描述
`$spacer`	`1rem` (default), or any value > 0	指定以编程方式生成 spacer utilities的默认间隔值。
`$enable-rounded`	`true` (default) or `false`	在各种组件上启用预定义的 `border-radius`。
`$enable-shadows`	`true` or `false` (default)	启用各种组件上预定义的 `box-shadow` 样式。不影响用于焦点状态的`box-shadow`。.
`$enable-gradients`	`true` or `false` (default)	通过各种组件上的`background-image` 样式启用预定义的渐变。
`$enable-transitions`	`true` (default) or `false`	在各种组件上启用预定义的 `transition`。
`$enable-prefers-reduced-motion-media-query`	`true` (default) or `false`	启用 `prefers-reduced-motion` 媒体查询，该查询将根据用户的浏览器/操作系统首选项抑制某些动画/变换。
`$enable-hover-media-query`	`true` or `false` (default)	已弃用
`$enable-grid-classes`	`true` (default) or `false`	启用为网格系统生成CSS类（例如， `.container`、 `.row`、 `.col-md-1`等）。
`$enable-caret`	`true` (default) or `false`	在`.dropdown-toggle`启用伪元素插入符号。
`$enable-pointer-cursor-for-buttons`	`true` (default) or `false`	将“手”光标添加到非禁用按钮元素。
`$enable-print-styles`	`true` (default) or `false`	启用样式以优化打印。
`$enable-responsive-font-sizes`	`true` or `false` (default)	启用响应字体大小。
`$enable-validation-icons`	`true` (default) or `false`	启用文本输入中的 `background-image` 和一些用于验证状态的自定义窗体。
`$enable-deprecation-messages`	`true` or `false` (default)	设置为 `true` 可在使用计划在`v5`中删除的任何不推荐使用的mixin和函数时显示警告。

颜色

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

所有颜色

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

$blue #007bff

$indigo #6610f2

$purple #6f42c1

$pink #e83e8c

$red #dc3545

$orange #fd7e14

$yellow #ffc107

$green #28a745

$teal #20c997

$cyan #17a2b8

您可以在Sass中使用这些方法：

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

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

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

在未来，我们将致力于为每种颜色的阴影提供Sass映射和变量，正如我们对下面的灰度颜色所做的那样。

主题颜色

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

$primary #007bff

$secondary #868e96

$success #28a745

$danger #dc3545

$warning #ffc107

$info #17a2b8

$light #f8f9fa

$dark #343a40

灰色（Grays）

在scss/_variables.scss中的一个扩展的灰色变量集和Sass映射，可在整个项目中保持一致的灰色。请注意，这些是“冷灰色”，倾向于微妙的蓝色调，而不是中性灰色。

$gray-100 #f8f9fa

$gray-200 #e9ecef

$gray-300 #dee2e6

$gray-400 #ced4da

$gray-500 #adb5bd

$gray-600 #6c757d

$gray-700 #495057

$gray-800 #343a40

$gray-900 #212529

在 scss/_variables.scss中，您将找到Bootstrap的颜色变量和Sass映射。下面是$colorsSass映射的示例：

$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循环也不限于颜色映射。您还可以生成组件或实用程序的响应变体。例如，我们的响应文本对齐实用程序将$grid-breakpoints Sass 映射的 @each循环与媒体查询包含混合在一起。

@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中包含了大约20个 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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --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);
  }
}