自定义 bootstrap 5 按钮的颜色和属性 [英] Customizing bootstrap 5 button colors and properties in it

问题描述

我已经在我的项目中创建了我的 custom.scss，并完成了这个:

I've created my custom.scss in my project, and done this:

$primary: #e84c22;

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

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

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

So far, the color is like this:

我对 btn-primary 类中的文本不满意.默认情况下，它是深色和常规字体.我想将其更改为 white and bold text 而不将 text-light 和 fw-bold 类添加到按钮元素.我希望它是这样的:

I am not satisfied with the text inside the btn-primary class. By default it's dark and regular font. I want to change it to white and bold text without adding text-light and fw-bold classes to the button element. I expected it to be like this:

如何通过修改 custom.scss 来做到这一点?

How can I do that by modifying the custom.scss?

额外信息:
不同于 btn-danger

默认为白色文本.bootstrap中必须有根据颜色亮度修改文本颜色的功能.

extra information:
Unlike btn-danger

It is white text by default. There must be a function to modify the text color according to the color brightness in bootstrap.

推荐答案

"一定有一个函数可以根据引导程序中的颜色亮度."

"There must be a function to modify the text color according to the color brightness in bootstrap."

是的，它使用了 此处解释的 WCAG 2.0 算法.根据 WCAG 算法，您使用的红色刚好足以将文本颜色翻转为深色.

Yes, it's using the WCAG 2.0 algorithm explained here. The red color you're using is just light enough to flip the text color to dark according to the WCAG algorithm.

按钮由 mixins 创建(参见:按钮在文档中).在这种情况下，button-variant mixin $color 的第三个参数定义为:

Buttons are created by mixins (see: Buttons in the docs). In this case the 3rd parameter of the button-variant mixin $color is defined as:

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

所以按钮的颜色是 $color-contrast-dark 或 $color-contrast-light，这取决于使用 $min 的 WCAG 2.0 计算-对比度.

So the button's color is either $color-contrast-dark or $color-contrast-light, depending on the WCAG 2.0 calculation using the $min-contrast-ratio.

因此，使自定义红色颜色稍微变暗会将文本颜色翻转为白色...

Therefore, making the custom red color color slightly darker will flip the text color to white...

$primary: #d73b11;

@import "bootstrap";    

或者，您可以使用原始的自定义颜色并在 btn-primary 上强制使用白色粗体文本，就像这样...

Or, you can use the original custom color and force white bold text on btn-primary like this...

$primary: #e84c22;

@import "bootstrap";

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

演示

或者，

您可以在 $min-contrast-ratio 变量上设置一个较低的值(3、4.5 和 7 是可接受的值)作为 显示在此答案中

You can set a lower value on the $min-contrast-ratio variable (3, 4.5, and 7 are the acceptable values) as shown in this answer

另请注意，您重新定义主题颜色映射的方式会清除所有其他主题颜色.您只需更改 $primary 的值即可更改主主题颜色.

Also note that the way you're re-defining the theme-color map is wiping out all the other theme colors. You only need to change the value of $primary to change the primary theme color.

这篇关于自定义 bootstrap 5 按钮的颜色和属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！