主题 | Theming Bootstrap

自定义引导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，您的更改将应用于遍历该映射的所有循环。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-09-28