颜色
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 映射。为避免增加文件大小,我们不会为每个变量创建文本或背景颜色类。相反,我们选择这些颜色的子集作为主题调色板。
在自定义颜色时,请务必监控对比度。如下所示,我们为每种主要颜色添加了三种对比度——一种用于色板的当前颜色,一种用于对抗白色,一种用于对抗黑色。
Sass 注释
Sass 无法以编程方式生成变量,因此我们自己手动为每种色调和阴影创建变量。我们指定中点值(例如,$blue-500
)并使用自定义颜色函数通过 Sass 的mix()
颜色函数着色(变亮)或阴影(变暗)我们的颜色。
使用与andmix()
不一样——前者将指定颜色与白色或黑色混合,而后者只调整每种颜色的亮度值。结果是一套更完整的颜色,如CodePen 演示中所示。lighten()
darken()
我们的tint-color()
和shade-color()
函数mix()
与我们的$theme-color-interval
变量一起使用,它为我们产生的每种混合颜色指定一个阶梯百分比值。请参阅scss/_functions.scss
和scss/_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;
}
颜色和背景实用程序类也可用于设置color
和background-color
使用500
颜色值。
生成实用程序
在 v5.1.0 中添加
Bootstrap 不包含每个颜色变量color
的实用程序,但您可以使用我们的实用程序 API和我们在 v5.1.0 中添加的扩展 Sass 映射background-color
自己生成这些。
- 首先,确保您已经导入了我们的函数、变量、mixin 和实用程序。
- 使用我们的
map-merge-multiple()
功能可以将多个 Sass 映射快速合并到一个新映射中。 - 合并这个新的组合映射以扩展任何具有
{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}
这将为每种颜色和级别生成新的实用程序。您也可以对任何其他实用程序和财产执行相同的操作。