颜色

Bootstrap有以我们的样式与组件为主题的丰富色彩系统支持。如此一来可以对任何项目进行更全面的响应式及扩展。

On this page

主题颜色

我们使用所有颜色的子集来创造较小的调色板以产生配色方案，也可以在Bootstrap的scss/_variables.scss 文件夹中将其作为Sass variables与Sass map来使用。

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

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

所有颜色

所有的Bootstrap色彩都可以作为scss/_variables.scss 文件夹中的Sass variables与Sass map做使用。为了避免增加文件大小，我们不会为每个变数创建文本或背景色彩类别。相反地，我们为主题色彩选择这些颜色的子集。

建立自定义色彩时，请确保其对比度。如下图所示，我们为每个主题色彩添加了三个对比度，一个用于当前色版的颜色，一种用于反白，以及一种用于反黑。

$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无法以编程方式产生变量，因此我们手动创造每一个色彩与阴影的变量。我们指明一个中间值（e.g.，$blue-500）并使用自定义色彩透过Sass的 mix()函数去着色（变亮）或加深（变暗）。

使用mix()不同于lighten()与darken()，前者将指定的色彩与白色或黑色混合，而后者仅调整每个色彩的亮度，最终产生一套更完整的色彩，如此CodePen示例中所示。

我们的tint-color()与shade-color()函数在$theme-color-interval变量旁使用mix()，他为我们的混合色彩指定了阶层式的百分比值。有关完整的源代码请参照scss/_functions.scss 与scss/_variables.scss文件。

Color Sass maps

BBootstrap的Sass文件包含三个maps，来帮助您快速轻松的循环显示色彩及其十六进制值的列表。

$colors 出了我们能使用的基础（500）颜色
$theme-colors 列出了所有已与义命名的主题色彩（如下所示）
$grays 列出了所有灰阶的的色调与阴影

在scss/_variables.scss中，您将会找到Bootstrap的色彩变数与Sass map。这是$colors Sass map的示例：

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

在map中添加、移除或修改数值，以更新他们在许多其他元件中的使用方式。不幸的是，此时并非每个元件都使用Sass map。未来的更新将努力对此进行改进。在此之前，请使用${color} 变量及此Sass map。

例子

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

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

颜色和背景通用类也可用于使用500个颜色值设置颜色和背景色。