颜色

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

主题颜色

我们使用所有颜色的子集来创造较小的调色板以产生配色方案,也可以在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.scssscss/_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个颜色值设置颜色和背景色。

返回顶部