Skip to main content Skip to docs navigation

Bootstrap 由广泛的颜色系统支持,该系统以我们的样式和组件为主题。这可以为任何项目实现更全面的定制和扩展。

颜色

添加于 v5.3.0

Bootstrap 的调色板在 v5.3.0 中继续扩展并变得更加细致。我们为secondarytertiary文本和背景颜色添加了新变量,另外{color}-bg-subtle还为我们的主题颜色添加了{color}-border-subtle、 和。{color}-text这些新颜色可通过 Sass 和 CSS 变量(但不是我们的颜色映射或实用程序类)获得,其明确目标是更容易跨多种颜色模式(如浅色和深色)进行自定义。这些新变量是全局设置的:root,适用于我们新的深色模式,而我们原来的主题颜色保持不变。

以 结尾的颜色-rgb提供red, green, blue用于rgb()rgba()颜色模式的值。例如,rgba(var(--bs-secondary-bg-rgb), .5)

小心!我们新的二级和三级颜色、我们现有的二级主题颜色以及我们的浅色和深色主题颜色可能会造成一些混淆。预计这将在 v6 中得到解决。
描述 斯沃琪 变量
主体 —默认前景(颜色)和背景,包括组件。
 
--bs-body-color
--bs-body-color-rgb
 
--bs-body-bg
--bs-body-bg-rgb
次要 -使用color较浅文本的选项。使用bg分隔符的选项并指示禁用的组件状态。
 
--bs-secondary-color
--bs-secondary-color-rgb
 
--bs-secondary-bg
--bs-secondary-bg-rgb
第三 -使用该color选项以获得更轻的文本。使用该bg选项为悬停状态、重音和井设置背景样式。
 
--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与具有rgba()值的背景混合。
 
--bs-border-color
--bs-border-color-rgb
Primary —主要主题颜色,用于超链接、焦点样式以及组件和表单活动状态。
基本的
--bs-primary
--bs-primary-rgb
背景微妙
--bs-primary-bg-subtle
边界微妙
--bs-primary-border-subtle
文本
--bs-primary-text
成功——用于积极或成功的行动和信息的主题颜色。
成功
--bs-success
--bs-success-rgb
背景微妙
--bs-success-bg-subtle
边界微妙
--bs-success-border-subtle
文本
--bs-success-text
危险——用于错误和危险行为的主题颜色。
危险
--bs-danger
--bs-danger-rgb
背景微妙
--bs-danger-bg-subtle
边界微妙
--bs-danger-border-subtle
文本
--bs-danger-text
警告 -用于非破坏性警告消息的主题颜色。
警告
--bs-warning
--bs-warning-rgb
背景微妙
--bs-warning-bg-subtle
边界微妙
--bs-warning-border-subtle
文本
--bs-warning-text
信息——用于中性和信息性内容的主题颜色。
信息
--bs-info
--bs-info-rgb
背景微妙
--bs-info-bg-subtle
边界微妙
--bs-info-border-subtle
文本
--bs-info-text
浅色 —用于对比度较低的颜色的附加主题选项。
--bs-light
--bs-light-rgb
背景微妙
--bs-light-bg-subtle
边界微妙
--bs-light-border-subtle
文本
--bs-light-text
深色 -用于更高对比度颜色的附加主题选项。
黑暗的
--bs-dark
--bs-dark-rgb
背景微妙
--bs-dark-bg-subtle
边界微妙
--bs-dark-border-subtle
文本
--bs-dark-text

使用新颜色

这些新颜色可通过 CSS 变量和实用程序类(如--bs-primary-bg-subtle和)访问,.bg-primary-subtle允许您使用变量编写自己的 CSS 规则,或通过类快速应用样式。这些实用程序是使用颜色的关联 CSS 变量构建的,并且由于我们为深色模式自定义了这些 CSS 变量,因此默认情况下它们也适用于颜色模式。

带有实用程序的示例元素
网页格式
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

主题颜色

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

基本的
中性
成功
危险
警告
信息
黑暗的

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

Check out our Sass maps and loops docs for how to modify these colors.

All colors

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.

$blue #0d6efd
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
$blue-700
$blue-800
$blue-900
$indigo #6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$purple #6f42c1
$purple-100
$purple-200
$purple-300
$purple-400
$purple-500
$purple-600
$purple-700
$purple-800
$purple-900
$pink #d63384
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$red #dc3545
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
$red-800
$red-900
$orange #fd7e14
$orange-100
$orange-200
$orange-300
$orange-400
$orange-500
$orange-600
$orange-700
$orange-800
$orange-900
$yellow #ffc107
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$green #198754
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$teal #20c997
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$cyan #0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$gray-500 #adb5bd
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black #000
$white #fff

Notes on Sass

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.

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.

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.

Color Sass maps

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 lists all our available base (500) colors
  • $theme-colors lists all semantically named theme colors (shown below)
  • $grays lists all tints and shades of gray

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

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

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.0

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.

  1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
  2. Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.
  3. Merge this new combined map to extend any utility with a {color}-{level} class name.

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/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";

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.