作者:_忘却的思念_ | 来源:互联网 | 2022-12-20 10:16
在Bootstrap 4中,可以通过覆盖如下变量来更改主题颜色:
$primary: #0074d9;
$danger: #ff4136;
或通过如下修改主题颜色地图:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
我们何时,为什么要在另一个上使用?
1> muecas..:
实际上,最好始终覆盖$theme-colors
地图中的主题颜色,以确保替换以后在生成相应CSS时botstrap将使用这些颜色的颜色。Bootstrap鼓励这样做。
如果您决定覆盖默认颜色定义,则将覆盖颜色图本身的创建,因此引导程序将无法再访问默认颜色。
您可以执行以下操作:
选项1
覆盖默认值(Bootstrap不建议使用)。
选项2
使用十六进制值覆盖地图:
$theme-colors : (
'primary' : #0074d9,
'danger' : #ff4136
);
然后,您可以使用来访问任何主题颜色map_get
:
$my-color : map_get($theme-colors, 'primary'); // #0074d9
选项3
您可以定义自己的变量集来覆盖地图,然后始终可以访问变量,而无需使用map_get
:
$my-primary-color : #0074d9;
$my-danger-color : #ff4136;
$theme-colors : (
'primary' : $my-primary-color,
'danger' : $my-danger-color
);