Bootstrap 自定义引导5按钮的颜色和属性

6uxekuva  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(1)|浏览(173)

我在项目中创建了custom.scss,并执行了以下操作:

$primary: #e84c22;

$theme-colors: (
  primary: $primary,
);

@import "~bootstrap/scss/bootstrap.scss";

到目前为止,颜色是这样的:

我对btn-primary类内部的文本不满意。默认情况下,它是深色和常规字体。我想将其更改为白色和粗体文本,而不向button元素添加text-lightfw-bold类。我以为是这样的:

如何修改custom.scss

额外信息:

btn-danger不同

默认为白色文本。在bootstrap中必须有一个根据颜色亮度修改文本颜色的函数。

6vl6ewon

6vl6ewon1#

“必须有一个功能,可以根据 Bootstrap 中的颜色亮度修改文本颜色。”
是的,它使用的是这里解释的WCAG 2.0算法。根据WCAG算法,您使用的红色刚好足以将文本颜色翻转为深色。
由mixin创建的数组(请参见:文档中的按钮)。在这种情况下,button-variant mixin $color的第三个参数定义为:

$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio)

因此按钮的颜色是$color-contrast-dark$color-contrast-light,这取决于WCAG 2.0使用$min-contrast-ratio的计算。
因此,使自定义红色颜色 * 稍微 * 暗一点将使文本颜色翻转为白色...

$primary: #d73b11;

@import "bootstrap";
  • 或者,* 您可以使用原始的自定义颜色,并在btn-primary上强制使用白色粗体文本,如下所示.
$primary: #e84c22;

@import "bootstrap";

.btn-primary {
    color: #fff;
    font-weight: bold;    
}

Demo
或者...
您可以将$min-contrast-ratio变量的值设置得更低(3、4.5和7是可接受的值),如shown in this answer
另外请注意,重新定义主题颜色Map的方式会消除所有其他主题颜色。您只需要更改$primary的值就可以更改主主题颜色。

相关问题