颜色
Bootstrap 由广泛的颜色系统支持，该系统为我们的样式和组件提供主题。这使得任何项目都可以进行更全面的定制和扩展。
颜色
¥Colors
Added in v5.3.0Bootstrap 的调色板在 v5.3.0 中继续扩展并变得更加细致。我们为 secondary 和 tertiary 文本和背景颜色添加了新变量，并为我们的主题颜色添加了 {color}-bg-subtle、{color}-border-subtle 和 {color}-text-emphasis。这些新颜色可通过 Sass 和 CSS 变量（但不是我们的颜色图或工具类）获得，其明确目标是更轻松地跨多种颜色模式（如浅色和深色）进行自定义。这些新变量在 :root 上全局设置，并适应我们新的夜间模式，而我们原来的主题颜色保持不变。
¥Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for secondary and tertiary text and background colors, plus {color}-bg-subtle, {color}-border-subtle, and {color}-text-emphasis for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on :root and are adapted for our new dark color mode while our original theme colors remain unchanged.
以 -rgb 结尾的颜色提供用于 rgb() 和 rgba() 颜色模式的 red, green, blue 值。例如，rgba(var(--bs-secondary-bg-rgb), .5)。
¥Colors ending in -rgb provide the red, green, blue values for use in rgb() and rgba() color modes. For example, rgba(var(--bs-secondary-bg-rgb), .5).
| Description | Swatch | Variables |
|---|---|---|
Body — Default foreground (color) and background, including components.
--bs-body-color--bs-body-color-rgb
--bs-body-bg--bs-body-bg-rgb
color option for lighter text. Use the bg option for dividers and to indicate disabled component states.
--bs-secondary-color--bs-secondary-color-rgb
--bs-secondary-bg--bs-secondary-bg-rgb
color option for even lighter text. Use the bg option to style backgrounds for hover states, accents, and wells.
--bs-tertiary-color--bs-tertiary-color-rgb
--bs-tertiary-bg--bs-tertiary-bg-rgb
--bs-emphasis-color--bs-emphasis-color-rgb
--bs-border-color-translucent to blend with backgrounds with an rgba() value.
--bs-border-color--bs-border-color-rgb
--bs-primary--bs-primary-rgb
--bs-primary-bg-subtle
--bs-primary-border-subtle
--bs-primary-text-emphasis
--bs-success--bs-success-rgb
--bs-success-bg-subtle
--bs-success-border-subtle
--bs-success-text-emphasis
--bs-danger--bs-danger-rgb
--bs-danger-bg-subtle
--bs-danger-border-subtle
--bs-danger-text-emphasis
--bs-warning--bs-warning-rgb
--bs-warning-bg-subtle
--bs-warning-border-subtle
--bs-warning-text-emphasis
--bs-info--bs-info-rgb
--bs-info-bg-subtle
--bs-info-border-subtle
--bs-info-text-emphasis
--bs-light--bs-light-rgb
--bs-light-bg-subtle
--bs-light-border-subtle
--bs-light-text-emphasis
--bs-dark--bs-dark-rgb
--bs-dark-bg-subtle
--bs-dark-border-subtle
--bs-dark-text-emphasis
|
使用新颜色
¥Using the new colors
这些新颜色可通过 CSS 变量和工具类（如 --bs-primary-bg-subtle 和 .bg-primary-subtle）访问，允许你使用变量编写自己的 CSS 规则，或通过类快速应用样式。这些工具是使用颜色关联的 CSS 变量构建的，并且由于我们为夜间模式自定义了这些 CSS 变量，因此它们默认情况下也适用于颜色模式。
¥These new colors are accessible via CSS variables and utility classes—like --bs-primary-bg-subtle and .bg-primary-subtle—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
Example element with utilities
</div>主题颜色
¥Theme colors
我们使用所有颜色的子集来创建较小的调色板来生成配色方案，也可用作 Bootstrap 的 scss/_variables.scss 文件中的 Sass 变量和 Sass 映射。
¥We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.
所有这些颜色都可以作为 Sass 贴图 $theme-colors 提供。
¥All these colors are available as a Sass map, $theme-colors.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
查看 我们的 Sass 映射和循环文档 了解如何修改这些颜色。
¥Check out our Sass maps and loops docs for how to modify these colors.
所有颜色
¥All colors
所有 Bootstrap 颜色都可用作 scss/_variables.scss 文件中的 Sass 变量和 Sass 映射。为了避免文件大小增加，我们不会为每个变量创建文本或背景颜色类。相反，我们为 主题调色板 选择这些颜色的子集。
¥All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.
自定义颜色时请务必监控对比度。如下所示，我们为每种主要颜色添加了三种对比度 - 一种用于样本的当前颜色，一种用于白色，一种用于黑色。
¥Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
Sass 注释
¥Notes on Sass
Sass 无法以编程方式生成变量，因此我们自己手动为每种色调和阴影创建变量。我们指定中点值（例如 $blue-500），并使用自定义颜色函数通过 Sass 的 mix() 颜色函数对颜色进行着色（变亮）或着色（变暗）。
¥Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., $blue-500) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s mix() color function.
使用 mix() 与 lighten() 和 darken() 不同 - 前者将指定颜色与白色或黑色混合，而后者仅调整每种颜色的亮度值。结果是一套更加完整的颜色，如 如 CodePen 演示所示。
¥Using mix() is not the same as lighten() and darken()—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as shown in this CodePen demo.
我们的 tint-color() 和 shade-color() 函数将 mix() 与 $theme-color-interval 变量一起使用，该变量指定我们生成的每种混合颜色的阶梯百分比值。有关完整源代码，请参阅 scss/_functions.scss 和 scss/_variables.scss 文件。
¥Our tint-color() and shade-color() functions use mix() alongside our $theme-color-interval variable, which specifies a stepped percentage value for each mixed color we produce. See the scss/_functions.scss and scss/_variables.scss files for the full source code.
彩色 Sass 映射
¥Color Sass maps
Bootstrap 的源 Sass 文件包含三个映射，可帮助你快速轻松地循环颜色列表及其十六进制值。
¥Bootstrap’s source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
-
$colors列出了我们所有可用的基色 (500)¥
$colorslists all our available base (500) colors -
$theme-colors列出了所有语义命名的主题颜色（如下所示）¥
$theme-colorslists all semantically named theme colors (shown below) -
$grays列出了所有灰色色调和阴影¥
$grayslists all tints and shades of gray
在 scss/_variables.scss 中，你将找到 Bootstrap 的颜色变量和 Sass 映射。以下是 $colors Sass 映射的示例：
¥Within scss/_variables.scss, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the $colors Sass map:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
添加、删除或修改映射中的值以更新它们在许多其他组件中的使用方式。不幸的是，目前并不是每个组件都使用这个 Sass 映射。未来的更新将努力改进这一点。在那之前，计划使用 ${color} 变量和这个 Sass 映射。
¥Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.
示例
¥Example
以下是如何在 Sass 中使用它们：
¥Here’s how you can use these in your Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Color and background utility classes are also available for setting color and background-color using the 500 color values.
生成工具
¥Generating utilities
Added in v5.1.0Bootstrap 不包括针对每个颜色变量的 color 和 background-color 实用程序，但你可以使用我们的 实用程序 API 以及 v5.1.0 中添加的扩展 Sass 映射自行生成这些实用程序。
¥Bootstrap doesn’t include color and background-color utilities for every color variable, but you can generate these yourself with our utility API and our extended Sass maps added in v5.1.0.
-
首先，请确保你已导入我们的函数、变量、mixin 和工具。
¥To start, make sure you’ve imported our functions, variables, mixins, and utilities.
-
使用我们的
map-merge-multiple()函数可以快速将多个 Sass 映射合并到一个新映射中。¥Use our
map-merge-multiple()function to quickly merge multiple Sass maps together in a new map. -
合并这个新的组合映射以扩展具有
{color}-{level}类名的任何工具。¥Merge this new combined map to extend any utility with a
{color}-{level}class name.
以下是使用上述步骤生成文本颜色工具（例如 .text-purple-500）的示例。
¥Here’s an example that generates text color utilities (e.g., .text-purple-500) using the above steps.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
这将为每种颜色和级别生成新的 .text-{color}-{level} 工具。你也可以对任何其他实用工具和属性执行相同的操作。
¥This will generate new .text-{color}-{level} utilities for every color and level. You can do the same for any other utility and property as well.