• 主题化 Bootstrap
    • 简介
    • Sass定义
      • 文件结构
      • 输入
      • 变量缺省值
      • Map定义与loops循环定义
        • 修改 map
        • 添加map
        • 移除map
      • 必须的键值
      • 函数
      • 色彩对比
    • Sass选项
    • 颜色
      • 颜色盘
      • 主题颜色
      • 灰度
    • 组件
      • 修饰符
      • 响应
    • CSS变量
      • 可用变量
      • 实例
      • 断点变量

    主题化 Bootstrap

    使用我们新的内置Sass变量自定义Bootstrap 4,用于全局风格偏好,方便的进行主题和组件属性定义。

    简介

    在Bootstrap 3中,主题主要由LESS决定,自定义CSS中的可能会覆盖项目dist文件中默认的内置的主题样式表,用户通过自定义各种颜色属性,可以完全重新设计Bootstrap 3的外观,而无需触摸核心文件。

    青出于蓝胜于蓝,Bootstrap 4继承了上一个版本的方便易用思路,新的主题化习惯与旧版沿袭相同,却更加方便。

    现在,主题由Sass变量,Sass maps和自定义CSS完成,虽然没有专门的主题样式表, 却可以启用内置主题来添加渐变,阴影等。

    Sass定义

    利用系统提供的Sass源文件、maps文件、变量、混合等。

    文件结构

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

    1. your-project/
    2. ├── scss
    3. └── custom.scss
    4. └── node_modules/
    5. └── bootstrap
    6. ├── js
    7. └── scss

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

    1. your-project/
    2. ├── scss
    3. └── custom.scss
    4. └── bootstrap/
    5. ├── js
    6. └── scss

    输入

    custom.scss中,您将导入Bootstrap的源Sass文件。 您有两个选择:包括所有Bootstrap,或选择您需要的部件。 我们鼓励后者,但要注意我们的组件有一些要求和依赖。 您还需要为我们的插件添加一些JavaScript。

    1. // Custom.scss
    2. // Option A: Include all of Bootstrap
    3. @import "../node_modules/bootstrap/scss/bootstrap";
      // Custom.scss
    4. // Option A: Include all of Bootstrap
    5. @import "../node_modules/bootstrap/scss/bootstrap";
    1. // Custom.scss
    2. // Option B: Include parts of Bootstrap
    3. // Required
    4. @import "../node_modules/bootstrap/scss/functions";
    5. @import "../node_modules/bootstrap/scss/variables";
    6. @import "../node_modules/bootstrap/scss/mixins";
    7. // Optional
    8. @import "../node_modules/bootstrap/scss/reboot";
    9. @import "../node_modules/bootstrap/scss/type";
    10. @import "../node_modules/bootstrap/scss/images";
    11. @import "../node_modules/bootstrap/scss/code";
    12. @import "../node_modules/bootstrap/scss/grid";

    使用该设置,您可以开始修改任何Sass变量和映射custom.scss。您还可以根据//Optional需要开始在该部分下添加Bootstrap的部分。我们建议使用bootstrap.scss文件中的完整导入堆栈作为起点。

    变量缺省值

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

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

    下面的例子,改变<body>中的background-colorcolor属性,并通过Nodejs NPM方法引导编译:

    1. // Your variable overrides $body-bg: #000;
    2. $body-color: #111;
    3. // Bootstrap and its default variables
    4. @import "node_modules/bootstrap/scss/bootstrap";

    对Bootstrap中的任何变量进行必要的重复定义,包括下面的全局选项和子类选项。

    Map定义与loops循环定义

    Sass的第三个版本给我们带来了新的数据类型,叫做map。虽然你可以不知道这个名称,但在其他的语言中我们使用过map,通常就是关联数组。换句话说,Sass的map就是用关键名匹配对应值的一个数组(这里译者为大家提供了一个技术普及帖:《使用Sass Maps 的技术普及知识》http://www.z01.com/help/web/3208.shtml)

    Bootstrap 4包括一些Sass map定义,使得更容易产生相关CSS的家庭。我们使用Sass map作为我们的颜色、网格、断点等关键了定义,这就如同Sass变量一样,所有Sass映射都包含!default标志,可以被覆盖并扩展。

    下面是改变了一个例子background-color ,并colorbody 进口,并通过NPM编译引导时:

    1. // Your variable overrides
    2. $body-bg: #000;
    3. $body-color: #111;
    4. // Bootstrap and its default variables
    5. @import "../node_modules/bootstrap/scss/bootstrap";

    修改 map

    例如,要修改我们$theme-colors map的现有颜色,请将以下内容添加到您的自定义Sass文件中:

    1. $theme-colors: (
    2. "primary": #0074d9,
    3. "danger": #ff4136
    4. );

    添加map

    添加一个新的颜色$theme-colors、新的键和值:

    1. $theme-colors: (
    2. "custom-color": #900
    3. );

    移除map

    要从$theme-colors任何其他画布删除颜色,请使用map-remove:

    1. // Required
    2. @import "node_modules/bootstrap/scss/functions";
    3. @import "node_modules/bootstrap/scss/variables";
    4. @import "node_modules/bootstrap/scss/mixins";
    5. $theme-colors: map-remove($theme-colors, "info", "light", "dark");
    6. // Optional
    7. @import "node_modules/bootstrap/scss/root";
    8. @import "node_modules/bootstrap/scss/reboot";
    9. @import "node_modules/bootstrap/scss/type";
    10. ...

    必须的键值

    Bootstrap假定在我们使用的Sass地图中存在一些特定的键,并自行扩展它们。在您定制包含的地图时,您可能会遇到使用特定Sass地图密钥的错误。

    例如,我们使用primarysuccess以及danger来自键 $theme-colors 的链接,按钮和表单的状态。替换这些键的值应该没有问题,但删除它们可能会导致Sass编译问题。在这些情况下,您需要修改使用这些值的Sass代码。

    函数

    Bootstrap使用多个Sass函数,但只有一个子集适用于一般主题。我们已经包含三个功能来获取颜色映射的值:

    1. @function color($key: "blue") {
    2. @return map-get($colors, $key);
    3. }
    4. @function theme-color($key: "primary") {
    5. @return map-get($theme-colors, $key);
    6. }
    7. @function gray($key: "100") {
    8. @return map-get($grays, $key);
    9. }

    这些允许您从Sass map中选择一种颜色,如同在v3中的颜色变量:

    1. .custom-element {
    2. color: gray("100");
    3. background-color: theme-color("dark");
    4. }

    我们还可获得特定的函数level的颜色来自$theme-colors map定义,负电平值会减轻颜色,而较高的电平值会变暗,从而实现变量定义颜色。

    1. @function theme-color-level($color-name: "primary", $level: 0) {
    2. $color: theme-color($color-name);
    3. $color-base: if($level > 0, #000, #fff);
    4. $level: abs($level);
    5. @return mix($color-base, $color, $level * $theme-color-interval);
    6. }

    在实践中,您可以调用该函数并传入两个参数:$theme-colors (如primary默认色 或 danger危险色) 的颜色名称和数字级别。

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

    未来还可以添加其他功能或您自己的自定义Sass,以创建附加Sass map的级别函数,或者如果要更详细地创建级别函数。

    色彩对比

    Bootstrap中包含的另外一个功能是色彩对比功能color-yiq,它基于YIQ color space指定的基色自动返回光(#fff)或暗(#111)产生颜色对比。此功能对于要生成多个类的mixins或循环特别有用。

    例如,从我们的$theme-colors map生成颜色样本:

    1. @each $color, $value in $theme-colors {
    2. .swatch-#{$color} {
    3. color: color-yiq($value);
    4. }
    5. }

    它也可以用于一次性对比度需求:

    1. .custom-element {
    2. color: color-yiq(#000); // returns `color: #fff`
    3. }

    您还可以使用我们的color map功能指定基色::

    1. .custom-element {
    2. color: color-yiq(theme-color("dark")); // returns `color: #fff`
    3. }

    Sass选项

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

    您可以在_variables.scss 文件中找到并自定义这些变量,用于关键全局选项。

    Variable(变量)Values(值)Description(描述)
    $spacer1rem (default), or any value > 0以编程方式生成我们的 间距系统。
    $enable-roundedtrue (default) or false启用组件的 border-radius 样式。
    $enable-shadowstrue or false (default)启用组件的 box-shadow 样式。
    $enable-gradientstrue or false (default)通过 background-image 各种组件上的样式启用预定义的渐变。
    $enable-transitionstrue (default) or false启用组件的 transition定义.
    $enable-hover-media-querytrue or false (default)
    $enable-grid-classestrue (default) or false使CSS类网格系统的产生 (如 .container, .row, .col-md-1, etc.).
    $enable-carettrue (default) or falseEnables pseudo element caret on .dropdown-toggle.
    $enable-print-stylestrue (default) or false启用优化打印的样式。

    颜色

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

    颜色盘

    Bootstrap 4中提供的所有颜色可用作我们scss/_variables.scss文件中的Sass变量和Sass映射,还将在随后的次要版本中扩展,以增加额外的阴影,如同本文档中的灰度调色板一样可选。

    Blue 蓝

    Indigo 靛青

    Purple 紫色

    Pink 粉红

    Red 正红

    Orange 橙红

    Yellow 黄

    Green 绿

    Teal 鸭绿

    Cyan 青

    以下是您可以在Sass中使用这些的方法::

    1. // With variable .alpha { color: $purple; }
    2. // From the Sass map with our `color()` function
    3. .beta { color: color("purple"); }

    彩色实用程序类也可用于设置colorbackground-color

    将来,我们的目标是为每种颜色的色调提供Sass地图和变量,就像下面的灰度色彩一样.

    主题颜色

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

    Primary

    Secondary

    Success

    Danger

    Warning

    Info

    Light

    Dark

    灰度

    系统提供一个广泛的灰色变量和一个Sass map 在scss/_variables.scss用于在整个项目中实现一致的灰色阴影。

    100

    200

    300

    400

    500

    600

    700

    800

    900

    _variables.scss,里,你会发现我们的颜色变量和Sass mpas。以下是$colors的Sass map定义变量:

    1. $colors: (
    2. "blue": $blue,
    3. "indigo": $indigo,
    4. "purple": $purple,
    5. "pink": $pink,
    6. "red": $red,
    7. "orange": $orange,
    8. "yellow": $yellow,
    9. "green": $green,
    10. "teal": $teal,
    11. "cyan": $cyan,
    12. "white": $white,
    13. "gray": $gray-600,
    14. "gray-dark": $gray-800
    15. ) !default;

    开发者可以自由添加、删除或修改这个maps中的值,以更新其在许多其他组件中的使用方式(遗憾的是,目前并不支持每个组件都能过Sass map来定义,未来版本的更新将力求改进这一点,目前只能使用${color}变量和这个Sass map。

    组件

    Bootstrap大多组件和实用程序都使用@each遍历Sass map映射的循环构建。通过我们$theme-colors生成组件的变体和为每个断点创建响应变体特别有用。当自定义这些Sass map并重新编译时,您将自动看到您在这些循环中反映的更改。

    修饰符

    Bootstrap的许多组件都使用基类修饰符类方法构建,这意味着大部分样式都包含在基础类(如.btn)中,而样式变量则限于修饰符类(如.btn-danger),这些修饰符类是从$theme-colorsmap构建的,以便自定义修饰符类的数量和名称。

    以下是我们如何循环遍历$theme-colors map以生成.alert组件和所有.bg-*后台实用程序的修改器的两个示例:

    1. // Generate alert modifier classes @each $color, $value in $theme-colors {
    2. .alert-#{$color} {
    3. @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
    4. }
    5. }
    6. // Generate `.bg-*` color utilities
    7. @each $color, $value in $theme-colors {
    8. @include bg-variant('.bg-#{$color}', $value);
    9. }

    响应

    Sass循环不限于彩色图,可以用它生成组件或实用程序的响应变体。例如我们的响应文本对齐实用程序,我们将Sass映射的@each循环$grid-breakpoints与媒体查询包含在一起:

    1. @each $breakpoint in map-keys($grid-breakpoints) {
    2. @include media-breakpoint-up($breakpoint) {
    3. $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    4. .text#{$infix}-left { text-align: left !important; }
    5. .text#{$infix}-right { text-align: right !important; }
    6. .text#{$infix}-center { text-align: center !important; }
    7. }
    8. }

    如果您需要修改$grid-breakpoints,您的更改将适用于遍历该地图的所有循环。

    CSS变量

    Bootstrap 4 在其编译的CSS中包含大约二十个CSS自定义属性(变量)。在浏览器的Inspector,代码沙箱或一般原型设计中工作时,可以轻松访问常用的值,例如我们的主题颜色,断点和主要字体堆栈。

    可用变量

    这里是我们包含的变量(注意:root 是必需的)。他们位于我们的_root.scss文件。

    1. :root {
    2. --blue: #007bff;
    3. --indigo: #6610f2;
    4. --purple: #6f42c1;
    5. --pink: #e83e8c;
    6. --red: #dc3545;
    7. --orange: #fd7e14;
    8. --yellow: #ffc107;
    9. --green: #28a745;
    10. --teal: #20c997;
    11. --cyan: #17a2b8;
    12. --white: #fff;
    13. --gray: #6c757d;
    14. --gray-dark: #343a40;
    15. --primary: #007bff;
    16. --secondary: #6c757d;
    17. --success: #28a745;
    18. --info: #17a2b8;
    19. --warning: #ffc107;
    20. --danger: #dc3545;
    21. --light: #f8f9fa;
    22. --dark: #343a40;
    23. --breakpoint-xs: 0;
    24. --breakpoint-sm: 576px;
    25. --breakpoint-md: 768px;
    26. --breakpoint-lg: 992px;
    27. --breakpoint-xl: 1200px;
    28. --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    29. --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    30. }

    实例

    CSS变量为Sass的变量提供了类似的灵活性,但是在被提供给浏览器之前不需要编译。例如,在这里我们用CSS变量重置页面的字体和链接样式。

    1. body {
    2. font: 1rem/1.5 var(--font-family-sans-serif);
    3. }
    4. a {
    5. color: var(--blue);
    6. }

    断点变量

    虽然我们原本包含在我们的CSS变量断点(如—breakpoint-md),这些都没有在媒体查询的支持,但他们仍然可以使用内的媒体查询规则集。这些断点变量保留在已编译的CSS中,以便向后兼容,因为它们可以被JavaScript使用。在规范中了解更多信息。

    以下是不支持的示例:

    1. @media (min-width: var(--breakpoint-sm)) {
    2. ...
    3. }

    这里是一个支持的例子:

    1. @media (min-width: 768px) {
    2. .custom-element {
    3. color: var(--primary);
    4. }
    5. }