主题引导
使用我们新的内置 Sass 变量自定义 Bootstrap 4,以实现全局样式偏好,以便轻松进行主题化和组件更改。
介绍
在 Bootstrap 3 中,主题主要由 LESS 中的变量覆盖、自定义 CSS 和我们包含在dist
文件中的单独主题样式表驱动。通过一些努力,可以完全重新设计 Bootstrap 3 的外观,而无需触及核心文件。Bootstrap 4 提供了一种熟悉但略有不同的方法。
现在,主题化由 Sass 变量、Sass 映射和自定义 CSS 完成。不再有专门的主题样式表;相反,您可以启用内置主题来添加渐变、阴影等。
萨斯
在使用您自己的资产管道编译 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
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@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 中的每个 Sass 变量都包含一个!default
标志,允许您在自己的 Sass 中覆盖变量的默认值,而无需修改 Bootstrap 的源代码。根据需要复制和粘贴变量,修改它们的值,然后删除!default
标志。如果一个变量已经被赋值,那么它不会被 Bootstrap 中的默认值重新赋值。
您将在 中找到 Bootstrap 变量的完整列表scss/_variables.scss
。一些变量设置为null
,这些变量不会输出属性,除非它们在您的配置中被覆盖。
变量覆盖必须在我们的函数、变量和 mixin 被导入之后,但在其余的导入之前。
这是一个在通过 npm 导入和编译 Bootstrap 时更改background-color
andcolor
的示例:<body>
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
根据需要对 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`
}
转义 SVG
我们使用该escape-svg
函数来转义<
,>
和#
SVG 背景图像的字符。这些字符需要转义才能在 IE 中正确呈现背景图像。使用该escape-svg
函数时,必须引用数据 URI。
加减函数
我们使用add
andsubtract
函数来包装 CSScalc
函数。这些函数的主要目的是避免将“无单位”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);
}
萨斯选项
使用我们内置的自定义变量文件自定义 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 在各种组件上启用预定义的装饰样式。不影响box-shadow 用于焦点状态的 s。 |
$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 |
设置为false 在使用任何计划在v5 . |
颜色
许多 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 变量和 Bootstrapscss/_variables.scss
文件中的 Sass 映射。
格雷斯
一组广泛的灰色变量和一个 Sass 映射,scss/_variables.scss
用于在您的项目中实现一致的灰色阴影。请注意,这些是“冷灰色”,倾向于微妙的蓝色调,而不是中性灰色。
在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, "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);
}
}