©
本文档使用
php.cn手册 发布
自定义引导4与我们的新内置Sass变量，为全球风格的首选项，以便于主题和组件的变化。
导言
在Bootstrap 3中，主题化很大程度上是由更少的、自定义的css中的变量重写驱动的，以及我们在我们的dist档案。通过一些努力，我们可以完全重新设计Bootstrap 3的外观，而无需触及核心文件。引导4提供了一种熟悉但略有不同的方法。
现在，主题化由Sass变量、Sass映射和自定义CSS完成。不再有专门的主题样式表；相反，您可以启用内置主题来添加渐变、阴影等。
沙斯
利用我们的源代码Sass文件来利用变量、映射、混合体等等。
文件结构
尽可能避免修改Bootstrap的核心文件。对于Sass来说，这意味着创建您自己的样式表来导入引导程序，以便您可以修改和扩展它。假设您已经下载了源文件或正在使用包管理器，那么您的文件结构如下所示：
your-project/├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scss
在你的custom.scss，您将导入Bootstrap的源Sass文件。你有两个选择：包括所有的引导，或选择你需要的部分。我们鼓励后者，但要注意，组件之间存在一些需求和依赖关系。您还需要为我们的插件添加一些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.还可以开始在// Optional根据需要分部门。
变量默认值
引导程序4中的每个Sass变量包括!default标志允许您在自己的Sass中重写变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改它们的值，并删除!default旗子。如果一个变量已经被赋值，那么它将不会被重新赋值的默认值在引导。
变量可以在默认变量之前或之后重写同一Sass文件。但是，在重写Sass文件时，您的重写必须在导入引导程序的Sass文件之前进行。
下面是一个更改background-color和color为<body>在通过国家预防机制导入和编译Bootstrap时：
// Your variable overrides$body-bg: #000;$body-color: #111;// Bootstrap and its default variables@import "node_modules/bootstrap/scss/bootstrap";
根据需要，对Bootstrap中的任何变量重复，包括下面的全局选项。
映射和循环
引导4包含了少量的Sass映射，键值对使得生成相关CSS的家族变得更容易。我们使用Sass地图作为我们的颜色，网格断点，等等。就像Sass变量一样，所有Sass映射都包括!default标志，可以重写和扩展。
例如，要修改$theme-colors映射，将以下内容添加到您的自定义Sass文件中：
$theme-colors: ( "primary": #0074d9, "danger": #ff4136);
若要将新颜色添加到$theme-colors，添加新的键和值：
$theme-colors: ( "custom-color": #900);
功能
引导程序使用了几个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%28E.。g.，主要或危险%29和数字级别。
.custom-element {
color: theme-color-level(primary, -10);}将来还可以添加其他函数，或者添加您自己的自定义Sass，以便为其他Sass映射创建级别函数，如果您想要更详细，甚至可以添加一个通用函数。
色彩对比
我们在Bootstrap中包含的一个附加功能是颜色对比功能，color-yiq.它利用YIQ颜色空间自动返回光%28#fff%29或黑暗%28#111%29基于指定基色的对比度颜色。此函数对于生成多个类的混和或循环特别有用。
例如，要从我们的$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`}SASS选项
使用内置的自定义变量文件自定义引导程序4，并轻松切换新的全局css首选项。$enable-*一些变量。重写变量的值并用npm run test视需要而定。
您可以在_variables.scss档案。
Variable | Values | Description |
|---|---|---|
$spacer | 1rem (default), or any value > 0 | Specifies the default spacer value to programmatically generate our spacer utilities. |
$enable-rounded | true (default) or false | Enables predefined border-radius styles on various components. |
$enable-shadows | true or false (default) | Enables predefined box-shadow styles on various components. |
$enable-gradients | true or false (default) | Enables predefined gradients via background-image styles on various components. |
$enable-transitions | true (default) or false | Enables predefined transitions on various components. |
$enable-hover-media-query | true or false (default) | … |
$enable-grid-classes | true (default) or false | Enables the generation of CSS classes for the grid system (e.g., .container, .row, .col-md-1, etc.). |
$enable-caret | true (default) or false | Enables pseudo element caret on .dropdown-toggle. |
$enable-print-styles | true (default) or false | Enables styles for optimizing printing. |
颜色
Bootstrap的许多组件和实用程序都是通过Sass映射中定义的一系列颜色构建的。这个映射可以在Sass中循环以快速生成一系列规则集。
所有颜色
Bootstrap 4中提供的所有颜色都可以作为Sass变量和我们的Sass映射提供。scss/_variables.scss档案。这将在随后的小版本中扩展，以添加更多的阴影，类似于灰度调色板我们已经包括了。
蓝色
靛蓝
紫
粉红
红
橙色
黄
绿
提尔
青色
下面是如何在Sass中使用这些内容：
// With variable.alpha { color: $purple; }// From the Sass map with our `color()` function.beta { color: color("purple"); }颜色工具类也可用于设置color和background-color。
在未来，我们的目标是为每种颜色的阴影提供Sass地图和变量，就像我们对下面的灰度颜色所做的那样。
主题色彩
我们使用所有颜色的子集来创建一个较小的调色板，用于生成配色方案，也可以作为Sass变量和我们的Sass映射使用。scss/_variables.scss档案。
初等
二次
成功
危险
警告
信息
轻光
黑暗
格雷斯
的灰色变量集和Sass映射scss/_variables.scss在整个项目中保持一致的灰色阴影。
100
200
300
400
500
600
700
800
900
内_variables.scss，你会找到我们的颜色变量和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循环也不限于彩色地图。您还可以生成组件或实用程序的响应变体。例如，我们的响应性文本对齐实用程序将@each循环的$grid-breakpoints包含媒体查询的Sass地图。
@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，您的更改将应用于遍历该映射的所有循环。