Bootstrap 简介
下载 Bootstrap
内容
浏览器 & 设备
JavaScript
Webpack
Parcel
Vite
可访问性
RFS
RTL
Contribute
定制
Sass
参数
颜色
Color modes
组件
CSS变量
优化
布局 Layout
断点
容器
网格
列
纵
实用工具
z-index
CSS 网格
  1. Bootstrap5
  2. 定制
  3. Sass

Sass

利用我们的 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

输入

在您的项目中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 (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

完成上述设置后，您就可以开始修改 <script> 标签中的任何 Sass 变量和映射了custom.scss。您还可以根据需要，在 <script> 标签下添加 Bootstrap 组件// Optional。我们建议您以我们提供的完整导入堆栈bootstrap.scss作为起点。

变量默认值

Bootstrap 中的每个 Sass 变量都包含一个!default标志，允许您在自己的 Sass 代码中覆盖变量的默认值，而无需修改 Bootstrap 的源代码。您可以根据需要复制粘贴变量，修改它们的值，然后移除该!default标志。如果变量已被赋值，则 Bootstrap 的默认值不会重新赋值。

您可以在此处找到 Bootstrap 变量的完整列表scss/_variables.scss。某些变量默认设置为 false null，除非在您的配置中对其进行覆盖，否则这些变量不会输出属性值。

变量覆盖必须放在函数导入之后，但要放在其他导入之前。

以下示例演示了如何通过 npm 导入和编译 Bootstrap 时更改background-color其color相关设置：<body>

// Required
@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/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

根据 Bootstrap 中的任何变量（包括以下全局选项）的需要重复上述步骤。

利用 npm 和我们提供的模板项目快速上手 Bootstrap！ 请前往 twbs/bootstrap-npm-starter 模板仓库，以了解如何如何在你自己的 npm 项目中构建和定制 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 图标库。

map和循环

Bootstrap 包含一些 Sass 映射（map），这些键值对可以简化生成相关 CSS 样式表的过程。我们使用 Sass 映射来设置颜色、网格断点等等。与 Sass 变量一样，所有 Sass 映射都包含一个!default标志，并且可以被覆盖和扩展。

默认情况下，我们的一些 Sass 映射会合并到空映射中。这样做是为了方便扩展给定的 Sass 映射，但代价是会使从映射中删除项目稍微困难一些。

修改map

地图中的所有变量theme−colors均定义为独立变量。要修改地图中已有的颜色theme-colors均定义为独立变量。要修改地图中已有的颜色theme-colors，请将以下代码添加到您的自定义 Sass 文件中：

$primary: #0074d9;
$danger: #ff4136;

之后，这些变量会在 Bootstrap 的$theme-colorsmap 函数中设置：

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

添加到map

要为 map 或任何其他地图添加新颜色theme−colors，请创建一个包含自定义值的新Sass地图，并将其与原始地图合并。在本例中，我们将创建一个新theme-colors，请创建一个包含自定义值的新 Sass 地图，并将其与原始地图合并。在本例中，我们将创建一个新custom-colors地图并将其与 map 合并$theme-colors。

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

从map中移除

要从theme−colors地图或其他任何地图中移除颜色，请使用‘map−remove.‘。请注意，您必须theme-colors地图或其他任何地图中移除颜色，请使用 ` map-remove.`。请注意，您必须theme-colors在 . 中定义 . 之后variables、使用 . 之前，将 . 插入到我们的要求之间maps：

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

所需密钥

Bootstrap 假定 Sass 映射中存在一些特定的键，因为我们自己也使用并扩展了这些映射。当您自定义内置映射时，如果使用了某个特定的 Sass 映射键，则可能会遇到错误。

例如，我们使用primary <link>、<button> 和 <form state>success这danger几个键来$theme-colors定义链接、按钮和表单状态。替换这些键的值应该不会有问题，但删除它们可能会导致 Sass 编译问题。在这种情况下，您需要修改使用这些值的 Sass 代码。

函数

颜色

除了Sass 映射之外，主题颜色也可以用作独立变量，例如$primary。

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()你可以使用 Bootstrap 的 color:lightness和color:downness 函数来调整颜色深浅shade-color()。这些函数会将颜色与黑色或白色混合，这与 Sass 原生的 color:lightness 和 color:downness 函数不同lighten()，darken()后者只会按固定值改变颜色亮度，通常无法达到预期效果。

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

实际上，你会调用该函数并传入颜色和权重参数。


.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

色彩对比

为了满足Web 内容无障碍指南 (WCAG)对比度要求，作者必须提供至少4.5:1 的文本颜色对比度和至少3:1 的非文本颜色对比度，极少数例外情况除外。

为了方便实现这一点，我们color-contrast在 Bootstrap 中加入了该函数。它使用WCAG 对比度算法，根据颜色空间中的相对亮度计算对比度阈值，sRGB并根据指定的基色自动返回浅色 ( #fff)、深色 ( #212529) 或黑色 ( #000) 对比度颜色。此函数对于需要生成多个类的 mixin 或循环尤其有用。

例如，要从我们的$theme-colors地图生成颜色样本：

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

它还可以用于一次性对比需求：

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

您还可以使用我们的颜色映射函数指定底色：

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

逃逸SVG

我们使用该escape-svg函数转义 SVG 背景图像中的逗号<、逗号>和#空格等字符。使用该escape-svg函数时，数据 URI 必须用引号括起来。

加法和减法功能

我们使用 addandsubtract函数来包装 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);
}

混合料

我们的scss/mixins/目录中有大量的 mixin，它们为 Bootstrap 的部分功能提供支持，也可以在您自己的项目中使用。

配色方案

我们提供了一个简写prefers-color-scheme媒体查询 mixin，支持light<style>、dark<style> 和自定义配色方案。有关配色方案 mixin 的更多信息，请参阅配色方案文档。

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}
上一章：定制
下一章：参数