颜色
Bootstrap是由一个广泛的颜色系统支持的,该系统以我们的样式和组件为主题。这样可以为任何项目提供更全面的定义和扩展。
主题颜色
我们使用所有颜色的子集来创建较小的调色板以生成配色方案,也可以在Bootstrap的 scss/_variables.scss
文件中将其作为Sass变量和Sass映射使用。
所有这些颜色都可以作为Sass map $theme-colors
使用。
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
查看我们的 Sass map和循环文档,了解如何修改这些颜色。
所有颜色
所有的Bootstrap颜色都可以作为Sass变量和 scss/_variables.scss
文件中的Sass映射使用。 为了避免文件大小增加,我们不会为每个变量创建文本或背景颜色类别。
相反,我们为 主题调色板 选择这些颜色的子集。
在定义颜色时一定要注意查看对比度。如下图所示,为每种主颜色添加了三种对比度,一种是针对当前的颜色,一种是针对白色,另一种是针对黑色。
Sass 注意事项
Sass无法以编程的方式生成变量,因此我们为每种色调手动创建了变量并为之着色。 我们设定了中点值(例如$blue-500
),并使用自定义颜色函数通过Sass的
mix()
颜色函数对我们的颜色进行着色(变亮)或着色(变暗)。
使用 mix()
不同于 lighten()
和
darken()
——前者将指定的颜色与白色或黑色混合,而后者仅调整每种颜色的明度值,结果是一套更完整的颜色套件,如 本代码页所示
我们的 tint-color()
和 shade-color()
函数使用 mix()
和我们的
$theme-color-interval
变量,该变量为我们生成的每种混合颜色指定一个阶梯式百分比值。有关完整的源代码,请参见
scss/_functions.scss
和 scss/_variables.scss
。
带颜色的 Sass maps
Bootstrap的源Sass文件包括三个编译文件,可以帮助你快速轻松地遍历一列颜色及其十六进制值。
$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
);
添加、删除或修改Sass编译后文件中的值,以更新它们在许多其他组件中的使用方式。不过目前并不是每个组件都利用这个Sass编译。未来的更新将努力改进这一点。在此之前,计划使用 ${color}
变量和这个Sass map。
示例
你还可以在Sass中使用这些方法:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Color实用程序 也可用于使用500个颜色值设置 color
和
background-color
。