Bootstrap/docs/4.5/getting-started/theming
主题引导
使用我们新的内置Sass变量自定义Bootstrap 4,以实现全局样式首选项,以方便主题化和组件更改。
介绍
在Bootstrap 3中,主题化主要由LESS中的变量替代,自定义CSS和我们包含在我们的主题样式表中驱动 dist 文件。 通过一些努力,您可以完全重新设计Bootstrap 3的外观,而无需触及核心文件。 Bootstrap 4提供了一种熟悉但略有不同的方法。
现在,主题化是通过Sass变量,Sass映射和自定义CSS来完成的。 没有更多专用的主题样式表了；相反,您可以启用内置主题以添加渐变,阴影等。
Sass
利用我们的源Sass文件来利用变量,映射,mixin等。 在我们的版本中,我们将Sass舍入精度提高到6（默认为5）,以防止浏览器舍入问题。
文件结构
尽可能避免修改Bootstrap的核心文件。 对于Sass,这意味着创建自己的样式表,该样式表将导入Bootstrap,以便您可以对其进行修改和扩展。 假设您使用的是npm之类的软件包管理器,则文件结构如下所示：
如果您下载了我们的源文件并且没有使用软件包管理器,则需要手动设置类似于该结构的文件,并将Bootstrap的源文件与您自己的文件分开。
输入
在你的 custom.scss ,您将导入Bootstrap的源Sass文件。 您有两种选择：包括所有Bootstrap,或选择所需的零件。 我们鼓励后者,尽管要知道我们的组件之间存在一些要求和依赖性。 您还需要为我们的插件包含一些JavaScript。
完成该设置后,您可以开始修改您的Sass变量和映射中的任何一个 custom.scss 。您也可以开始在以下部分添加Bootstrap的一部分 // Optional 根据需要。 我们建议使用我们完整的导入堆栈 bootstrap.scss 文件作为起点。
可变默认值
Bootstrap 4中的每个Sass变量都包括 !default 标志,可让您在自己的Sass中覆盖变量的默认值,而无需修改Bootstrap的源代码。 根据需要复制和粘贴变量,修改其值,然后删除 !default 旗。 如果已经分配了变量,则不会使用Bootstrap中的默认值重新分配该变量。
您可以在以下位置找到Bootstrap变量的完整列表 scss/_variables.scss 。一些变量设置为 null ,除非您在配置中覆盖了这些变量,否则它们不会输出属性。
同一Sass文件中的变量覆盖可以在默认变量之前或之后。 但是,在跨Sass文件进行覆盖时,必须先进行覆盖,然后再导入Bootstrap的Sass文件。
这是一个更改 background-color and color 为了 <body> 通过npm导入和编译Bootstrap时：
对Bootstrap中的任何变量（包括下面的全局选项）进行必要的重复。
映射和循环
Bootstrap 4包含少量的Sass映射,键值对,可以更轻松地生成相关CSS系列。 我们将Sass贴图用于我们的颜色,网格断点等。 就像Sass变量一样,所有Sass映射都包括 !default 标志,可以覆盖和扩展。
默认情况下,我们的一些Sass映射会合并为空映射。 这样做是为了轻松扩展给定的Sass地图,但这是以制作为代价的 去除 地图上的项目会稍微困难一些。
修改地图
修改我们现有的颜色 $theme-colors 图,将以下内容添加到您的自定义Sass文件中：
新增至地图
为添加新颜色 $theme-colors ,添加新的键和值：
从地图上删除
去除颜色 $theme-colors 或任何其他地图,使用 map-remove 。请注意,您必须将其插入我们的要求和选项之间：
必填键
Bootstrap会假设我们使用并扩展了它们后,Sass映射中存在一些特定的键。 自定义包含的地图时,在使用特定Sass地图的键时可能会遇到错误。
例如,我们使用 primary,success ,和 danger 来自的键 $theme-colors 用于链接,按钮和表单状态。 替换这些键的值应该没有问题,但是删除它们可能会导致Sass编译问题。 在这些情况下,您需要修改使用这些值的Sass代码。
功能
Bootstrap利用了一些Sass功能,但是只有一个子集适用于一般主题。 我们提供了三个用于从颜色图中获取值的功能：
它们使您可以从Sass映射中选择一种颜色,就像使用v3中的颜色变量一样。
我们还有另一个获取特定内容的功能 水平 从颜色 $theme-colors map. 负级别值将使颜色变亮,而更高级别将使颜色变暗。
实际上,您将调用该函数并传入两个参数：颜色名称来自 $theme-colors （例如主要或危险）和数字级别。
将来可以添加其他功能,也可以添加自己的自定义Sass来为其他Sass映射创建级别功能,如果您想更详细些,甚至可以添加通用功能。
色彩对比
我们在Bootstrap中包含的另一个功能是颜色对比功能, color-yiq 。它利用 YIQ色彩空间 自动返回灯光（ #fff ）或深色（ #111 ）基于指定基础色的对比色。 此功能对于生成多个类的混合或循环特别有用。
例如,从我们的生成色样 $theme-colors map:
它也可以用于一次性对比需求：
您还可以使用我们的颜色图功能指定基本颜色：
逃脱SVG
我们使用 escape-svg 逃脱功能 <,> and # SVG背景图片的字符。 这些字符需要转义以正确显示IE中的背景图像。
加减函数
我们使用 add and subtract 包装CSS的函数 calc 功能。 这些功能的主要目的是为了避免“无单位”错误 0 值传递给 calc 表达。 像这样的表达 calc(10px - 0) 尽管在数学上是正确的,但将在所有浏览器中返回错误。
计算有效的示例：
计算无效的示例：
无礼的选择
使用我们的内置自定义变量文件自定义Bootstrap 4,并使用新的属性轻松切换全局CSS首选项 $enable-* Sass变量。 覆盖变量的值并重新编译 npm run test 如所须。
您可以在Bootstrap的 scss/_variables.scss 文件。
| 变量 | 价值观 | 描述 |
|---|---|---|
$spacer
|
1rem （预设）,或任何大于0的值
|
指定默认的spacer值,以编程方式生成我们的 间隔工具 . |
$enable-rounded
|
true （默认）或 false
|
启用预定义 border-radius 各种组件上的样式。
|
$enable-shadows
|
true or false （默认）
|
启用预定义 box-shadow 各种组件上的样式。
|
$enable-gradients
|
true or false （默认）
|
通过启用预定义的渐变 background-image 各种组件上的样式。
|
$enable-transitions
|
true （默认）或 false
|
启用预定义 transition 在各种组件上。
|
$enable-prefers-reduced-motion-media-query
|
true （默认）或 false
|
启用 prefers-reduced-motion 媒体查询 ,它会根据用户的浏览器/操作系统偏好来禁止某些动画/过渡。
|
$enable-hover-media-query
|
true or 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 or false （默认）
|
启用 响应字体大小 . |
$enable-validation-icons
|
true （默认）或 false
|
启用 background-image 文本输入中的图标和一些用于验证状态的自定义表单。
|
$enable-deprecation-messages
|
true or false （默认）
|
调成 true 在使用计划在其中删除的任何不推荐使用的mixin和函数时显示警告 v5.
|
颜色
Bootstrap的许多各种组件和实用程序都是通过Sass映射中定义的一系列颜色构建的。 可以在Sass中循环映射此地图,以快速生成一系列规则集。
所有颜色
Bootstrap 4中可用的所有颜色都可以作为Sass变量和Sass映射在 scss/_variables.scss 文件。 在后续的次要版本中将对此进行扩展,以添加其他阴影,就像 灰度调色板 我们已经包括在内。
Blue
靛青
紫色
Pink
Red
橙子
黄色
绿色
Teal
Cyan
您可以在Sass中使用这些方法：
颜色实用程序类 也可用于设置 color and background-color.
将来,我们将致力于为每种颜色的阴影提供Sass贴图和变量,就像我们对下面的灰度颜色所做的那样。
主题颜色
我们使用所有颜色的一个子集来创建较小的调色板以生成配色方案,这些颜色也可以作为Bootstrap的Sass变量和Sass映射使用 scss/_variables.scss 文件。
主
次要
成功
危险
警告
Info
光
Dark
格雷斯
一组广泛的灰色变量和Sass映射 scss/_variables.scss 在整个项目中获得一致的灰色阴影。 请注意,这些是“冷灰色”,趋向于微妙的蓝色调,而不是中性灰色。
100
200
300
400
500
600
700
800
900
内 scss/_variables.scss ,您会找到Bootstrap的颜色变量和Sass贴图。 这是一个例子 $colors 萨斯地图：
在地图中添加,删除或修改值,以更新它们在许多其他组件中的使用方式。 不幸的是,此时,还没有 每一个 组件利用此Sass映射。 未来的更新将努力对此进行改进。 在此之前,请计划使用 ${color} 变量和此Sass映射。
组件
Bootstrap的许多组件和实用程序都是使用内置的 @each 遍历Sass映射的循环。 这对于我们的组件生成变体特别有用。 $theme-colors 并为每个断点创建响应变体。 自定义这些Sass映射并重新编译时,您会自动在这些循环中看到您所做的更改。
修饰符
Bootstrap的许多组件都是使用基本修饰符类方法构建的。 这意味着大部分样式都包含在基本类中（例如, .btn ）,而样式变体仅限于修饰符类（例如, .btn-danger ). 这些修饰符类是根据 $theme-colors 进行映射以自定义修饰符类的数量和名称。
这是我们如何循环处理两个示例 $theme-colors 映射以生成对 .alert 组件和我们所有的 .bg-* 后台实用程序。
反应灵敏
这些Sass循环也不限于颜色图。 您还可以生成组件或实用程序的响应式变体。 以我们的自适应文本对齐实用程序为例,我们将 @each 循环 $grid-breakpoints 带有媒体查询的Sass映射包括。
您是否需要修改您的 $grid-breakpoints ,您的更改将应用于在该地图上进行迭代的所有循环。
CSS变量
Bootstrap 4包括大约两打 CSS自定义属性（变量） 在其已编译的CSS中。 当您在浏览器的Inspector,代码沙箱或常规原型中工作时,使用它们可以轻松访问常用值,例如我们的主题颜色,断点和主要字体堆栈。
可用变量
以下是我们包含的变量（请注意, :root 是必须的）。 它们位于我们的 _root.scss 文件。
例子
CSS变量提供了与Sass变量类似的灵活性,但无需先进行编译即可提供给浏览器。 例如,在这里我们使用CSS变量重置页面的字体和链接样式。
断点变量
虽然我们最初在我们的CSS变量中包含断点（例如, --breakpoint-md ), 媒体查询不支持这些 ,但仍可以使用 内 媒体查询中的规则集。 这些断点变量保留在编译后的CSS中,以实现向后兼容性,因为它们可以被JavaScript使用。 在规格中了解更多 .
这是一个例子 不支持的功能：
这是一个例子 支持什么：
