Bootstrap主题模板

使用我们新的内置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这样的包管理器,那么您将拥有一个如下所示的文件结构:

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

@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’标志,使您可以在自己的Sass中覆盖变量的默认值,而无需修改Bootstrap的源代码。 根据需要复制和粘贴变量,修改其值,然后删除“!default”标志。 如果已经分配了变量,则不会被Bootstrap中的默认值重新分配。

您可以在scss / _variables.scss中找到Bootstrap变量的完整列表。 有些变量设置为“ null”,这些变量除非在配置中被覆盖,否则不会输出属性。

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

这是一个通过npm导入和编译Bootstrap时,更改<body>的background-color和color的示例:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

对Bootstrap中的任何变量(包括下面的全局选项)进行必要的重复。

映射和循环(Maps and loops)

Bootstrap 4包含少量的Sass映射,键值对,可以更轻松地生成相关CSS系列。 我们将Sass映射用于我们的颜色,网格断点等。 就像Sass变量一样,所有Sass映射都包含!default标志,并且可以覆盖和扩展。

默认情况下,我们的一些Sass映射会合并为空映射。 这样做是为了轻松扩展给定的Sass地图,但这样做的代价是使从地图上删除项目变得更加困难。

修改映射map

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

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

添加到映射map

要将新颜色添加到$theme-colors中,请添加新的键和值:

$theme-colors: (
  "custom-color": #900
);

从映射map上删除

要从$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";
...

必填键keys

Bootstrap假定在我们使用和扩展它们时,Sass映射中存在某些特定键。 在自定义包括的maps地图时,在使用特定Sass地图的(map’s)键时可能会遇到错误。

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

功能

Bootstrap利用了一些Sass功能,但是只有一个子集适用于一般主题。 我们包括了三个用于从颜色图(maps)中获取值的函数:

@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映射(map)中选择一种颜色,就像使用v3中的颜色变量一样。

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

我们还有另一个函数可以从$theme-colors map映射中获取特定的颜色级别。 负级别值将使颜色变亮,而更高级别将使颜色变暗。

@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颜色空间]YIQ color space根据指定的基础颜色自动返回浅色(#fff)或深色(#111`)对比色 。 此函数对生成多个类的mixin或循环特别有用。

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

@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`
}

Escape SVG

我们使用escape-svg函数对SVG背景图片的<>>和#`字符进行转义。 这些字符需要转义以正确显示IE中的背景图像。

加减函数

我们使用addsubtract函数包装CSScalc函数。 这些函数的主要目的是避免在将“无单位”“ 0”值传递到“ calc”表达式中时避免错误。 尽管在数学上是正确的,但诸如calc(10px-0)之类的表达式将在所有浏览器中返回错误。

calc有效的示例:

$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);
}

Sass 选项

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

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

变量 描述
$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-prefers-reduced-motion-media-query true (default) or false Enables the prefers-reduced-motion media query, which suppresses certain animations/transitions based on the users’ browser/operating system preferences.
$enable-hover-media-query true or false (default) Deprecated
$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-pointer-cursor-for-buttons true (default) or false Add “hand” cursor to non-disabled button elements.
$enable-print-styles true (default) or false Enables styles for optimizing printing.
$enable-responsive-font-sizes true or false (default) Enables responsive font sizes.
$enable-validation-icons true (default) or false Enables background-image icons within textual inputs and some custom forms for validation states.
$enable-deprecation-messages true or false (default) Set to true to show warnings when using any of the deprecated mixins and functions that are planned to be removed in v5.

颜色

Bootstrap的许多各种组件和实用程序都是通过Sass映射中定义的一系列颜色构建的。 可以在Sass中循环映射此地图,以快速生成一系列规则集。

所有颜色

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

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"); }

Color utility classes are also available for setting color and background-color.

将来,我们将致力于为每种颜色的阴影提供Sass映射和变量,就像我们对下面的灰度颜色所做的那样。

主题颜色

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

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

灰色(Grays)

scss/_variables.scss 中的一组广泛的灰色变量和Sass映射可在整个项目中使用一致的灰色阴影。 请注意,这些是“冷灰色”,趋向于微妙的蓝色调,而不是中性灰色。

100
200
300
400
500
600
700
800
900

scss/_variables.scss中,您会找到Bootstrap的颜色变量和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;

在地图中添加,删除或修改值,以更新它们在许多其他组件中的使用方式。 不幸的是,此时,没有_every_组件使用此Sass映射。 未来的更新将努力对此进行改进。 在此之前,请计划使用$ {color}变量和此Sass映射。

组件

Bootstrap的许多组件和实用程序都是通过在Sass映射上迭代的@each循环构建的。 这对于通过我们的$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);
}

响应灵敏(Responsive)

这些Sass循环也不限于颜色映射。 您还可以生成组件或实用程序的响应式变体。 以我们的响应式文本对齐实用程序为例,我们在其中将$grid-breakpoints Sass映射的@each循环与媒体查询include混合在一起。

@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自定义属性(变量)]CSS custom properties (variables) 。 当在浏览器的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, "Noto 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),但是媒体查询中不支持这些断点,但仍可以在媒体查询中_within_规则集使用它们。 这些断点变量保留在编译后的CSS中,以实现向后兼容,因为它们可以被JavaScript使用。 [在规范中了解更多信息](https://www.w3.org/TR/css-variables-1/#using-variables)。

这是不支持的示例:

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

这是支持的示例:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}