制作主题

使用我们新的内置 Sass 变量自定义 Bootstrap 4,以获得全局样式设置,以便于主题和组件更改。

导览

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

现在,主题是由 Sass 变量,Sass 映射和自定义 CSS 完成的。 没有专门的主题样式表; 相反,你可以启用内置主题来添加渐变,阴影等。

Sass

使用我们的源Sass文件来利用变量,映射,混合等。

文件结构

尽可能避免修改 Bootstrap 的核心文件。 对于 Sass,这意味着创建自己的样式表,导入 Bootstrap ,以便你可以修改和扩展它。 假设你正在使用像 npm 这样的包管理器,那么你将拥有如下所示的文件结构:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

如果你已经下载了我们的源文件并且没有使用包管理器,那么你将需要手动设置类似于该结构的内容,从而使 Bootstrap 的源文件与你自己的源文件分开。

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importing

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

变量默认值

Bootstrap 4中的每个 Sass 变量都包含 !default 志,允许你在不修改 Bootstrap 源代码的情况下覆盖自己Sass中变量的默认值。 根据需要复制和粘贴变量,修改它们的值,并删除 !default 标志。 如果已经分配了变量,则不会通过 Bootstrap 中的默认值重新分配该变量。

你将在 scss/_variables.scss 中找到Bootstrap变量的完整列表。

同一Sass文件中的变量覆盖可以在默认变量之前或之后。 但是,当覆盖Sass文件时,必须在导入Bootstrap的Sass文件之前进行覆盖。

这是一个更改 background-colorcolor 的示例 通过npm导入和编译Bootstrap时 <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";
...

必须的键(key)

Bootstrap 假设 Sass 映射中存在一些特定的键,因为我们自己使用并扩展了这些键(key)。 在自定义包含的映射时,你可能会遇到使用特定 Sass映射键(key) 的错误。

例如,我们使用来自 $theme-colorsprimary, 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);
}

可以在将来添加其他功能或你自己的自定义 Sass 为其他 Sass 映射创建级别功能,如果你想要更详细,甚至可以添加通用功能。

颜色对比

我们在Bootstrap中包含的另一个功能是颜色对比功能, color-yiq. 它利用 YIQ 颜色空间 自动返回亮 (#fff) 或暗 (#111) 基于指定的基色对比色。 此函数对于生成多个类的mixins或循环特别有用。

例如,要从我们的 $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 options

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

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

变量 说明
$spacer 1rem (default), or any value > 0 指定默认的spacer值,以编程方式生成spacer工具。
$enable-rounded true (default) or false 在各种组件上启用预定义的border-radius样式。
$enable-shadows true or false (default) 在各种组件上启用预定义的 box-shadow 样式.
$enable-gradients true or false (default) 通过各种组件上的 background-image 样式启用预定义渐变。
$enable-transitions true (default) or false 在各种组件上启用预定义的 transition
$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-print-styles true (default) or false 启用优化打印表现的样式。

颜色

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

全部颜色

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

Blue
Indigo
Purple
Pink
Red
Orange
Yellow
Green
Teal
Cyan

以下是你在 Sass 中使用这些内容的方法:

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

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

颜色工具类也可用于设置颜色和背景颜色。

将来,我们的目标是为每种颜色的阴影提供 Sass 映射和变量,就像我们使用下面的灰度颜色一样。

主题颜色

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

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

灰度

一组广泛的灰色变量和 scss/_variables.scss 中的 Sass 映射,用于整个项目中一致的灰色阴影。

100
200
300
400
500
600
700
800
900

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 的许多组件都是使用 base-modifier 类方法构建的。 这意味着大部分样式包含在基类中(例如,.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 Sass 混合 $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中包含大约24个 CSS自定义属性(变量) 在浏览器的Inspector,代码沙箱或一般原型设计中工作时,这些可以轻松访问常用值,如主题颜色,断点和主要字体堆栈。

可用变量

以下是我们包含的变量(请注意 :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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}