颜色

Bootstrap受到以我们的样式和组件为主题的广泛色彩系统的支持。这样可以对任何项目进行更全面的自定义和扩展。

在本页面

主题颜色

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

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

所有这些颜色都可以作为Sass映射使用$theme-colors。

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

查看我们的Sass映射和文档，了解如何修改这些颜色。

所有颜色

所有Bootstrap颜色都可以作为Sass变量和scss/_variables.scss 文件中的Sass映射使用。为了避免增加文件大小，我们不会为每个变量创建文本或背景颜色类。相反，我们为主题调色板选择这些颜色的子集。

自定义颜色时，请确保监视对比度。如下所示，我们为每种主要颜色添加了三种对比度-一种用于样本的当前颜色，一种针对白色，另一种针对黑色。

$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

关于Sass的说明

Sass无法以编程方式生成变量，因此我们为每种色调手动创建了变量并为阴影着色。我们指定中点值（例如$blue-500），并使用自定义颜色函数通过Sass的mix()颜色函数对我们的颜色进行变亮变暗。

使用 mix()与 lighten() 和 darken()不同，前者将指定的颜色与白色或黑色混合，而后者仅调整每种颜色的亮度值。结果是一套更完整的颜色，如这个CodePen演示所示。

我们的tint-color() 和 shade-color() 函数与 $theme-color-interval变量一起使用mix()，该变量为我们生成的每种混合颜色指定一个阶梯百分比值。有关完整的源代码，请参见scss/_functions.scss 和 scss/_variables.scss 文件。

Color Sass 映射

Bootstrap的源Sass文件包括三个映射，可帮助您快速轻松地遍历颜色列表及其十六进制值。

$colors 列出我们所有可用的基准（500）颜色
$theme-colors 列出所有以语义命名的主题颜色（如下所示）
$grays 列出所有的色调和灰色阴影

在 scss/_variables.scss中，您会找到Bootstrap的颜色变量和Sass映射。这是 $colors Sass 映射示例：

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

在映射中添加、删除或修改值，以更新它们在许多其他组件中的使用方式。不幸的是，目前并不是每个组件都使用这个Sass映射。今后的更新将努力改进这一点。在此之前，计划使用${color}变量和这个Sass映射。

示例

您可以在Sass中使用这些方法：

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Color工具类也可用于使用500颜色值来设置color 和 background-color 。