跳到主要内容 跳到文档导航
in English

颜色

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

主题颜色

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

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

所有这些颜色都可以作为 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 映射。为避免增加文件大小,我们不会为每个变量创建文本或背景颜色类。相反,我们选择这些颜色的子集作为主题调色板

在自定义颜色时,请务必监控对比度。如下所示,我们为每种主要颜色添加了三种对比度——一种用于色板的当前颜色,一种用于对抗白色,一种用于对抗黑色。

$蓝色#0d6efd
$蓝色-100
$蓝色-200
$蓝色-300
$蓝色-400
$蓝色-500
$蓝色-600
$蓝色-700
$蓝色-800
$蓝色-900
$靛蓝#6610f2
$靛蓝-100
$靛蓝-200
$靛蓝-300
$靛蓝-400
$靛蓝-500
$靛蓝-600
$靛蓝-700
$靛蓝-800
$靛蓝-900
$紫色#6f42c1
$紫100
$紫200
$紫300
$紫400
$紫500
$紫600
$紫700
$紫800
$紫900
$粉红色#d63384
$粉红-100
$粉红色-200
$粉红-300
$粉红-400
$粉红-500
$粉红-600
$粉色-700
$粉色-800
$粉色-900
$红色#dc3545
$红-100
$red-200
$red-300
$红-400
$red-500
$red-600
$red-700
$red-800
$red-900
$橙色#fd7e14
$橙色-100
$橙色-200
$橙色-300
$橙色-400
$橙色-500
$橙色-600
$橙色-700
$橙色-800
$橙色-900
$黄色#ffc107
$黄100
$黄色-200
$黄色-300
$黄色-400
$黄色-500
$黄色-600
$黄色-700
$黄色-800
$黄色-900
$绿色#198754
$green-100
$green-200
$green-300
$green-400
$green-500
$绿色-600
$绿色-700
$green-800
$绿色-900
$蓝绿色#20c997
100 美元
200 美元
300 美元
$青色-400
$青色-500
$青色-600
$青色-700
$青色-800
900 美元
$青色#0dcaf0
$青色-100
$青色-200
$青色-300
$青色-400
$青色-500
$青色-600
$青色-700
$青色-800
$青色-900
$灰色-500#adb5bd
$灰色-100
$灰色-200
$灰色-300
$灰色-400
$灰色-500
$灰色-600
$灰色-700
$灰色-800
$灰色-900
$黑色#000
$白色#fff

Sass 注释

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

使用与andmix()不一样——前者将指定颜色与白色或黑色混合,而后者只调整每种颜色的亮度值。结果是一套更完整的颜色,如CodePen 演示中所示lighten()darken()

我们的tint-color()shade-color()函数mix()与我们的$theme-color-interval变量一起使用,它为我们产生的每种混合颜色指定一个阶梯百分比值。请参阅scss/_functions.scssscss/_variables.scss文件以获取完整的源代码。

彩色 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;
}

颜色背景实用程序类也可用于设置colorbackground-color使用500颜色值。

生成实用程序

在 v5.1.0 中添加

Bootstrap 不包含每个颜色变量color的实用程序,但您可以使用我们的实用程序 API和我们在 v5.1.0 中添加的扩展 Sass 映射background-color自己生成这些。

  1. 首先,确保您已经导入了我们的函数、变量、mixin 和实用程序。
  2. 使用我们的map-merge-multiple()功能可以将多个 Sass 映射快速合并到一个新映射中。
  3. 合并这个新的组合映射以扩展任何具有{color}-{level}类名的实用程序。

.text-purple-500这是一个使用上述步骤生成文本颜色实用程序(例如)的示例。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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}这将为每种颜色和级别生成新的实用程序。您也可以对任何其他实用程序和财产执行相同的操作。