如何在Bootstrap 4和Sass中设置自定义按钮的文本颜色? [英] How to set custom button text color in Bootstrap 4 and Sass?
本文介绍了如何在Bootstrap 4和Sass中设置自定义按钮的文本颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在Bootstrap 4中使用白色(#fff)文本颜色创建新的按钮样式. Mixin button-variant
根据背景颜色自动设置文本颜色.如何在不修改_buttons.scss
的情况下使用此mixin并同时设置颜色?
I would like to create a new button style in Bootstrap 4 with a white (#fff) text color. Mixin button-variant
automatically sets the text color based on the background color. How can I use this mixin and set the color at the same time, without modifying _buttons.scss
?
custom.scss
.my_button {
@include button-variant(HOW TO SET TEXT COLOR TO WHITE?);
}
_buttons.scss
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
color: color-yiq($background);
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
}
推荐答案
这类似于:您需要使用@include作为自定义按钮,设置color:
,然后传递适当的mixin参数...
You need to use @include for the custom button, set the color:
, and pass in the appropriate mixin params...
.btn-custom {
@include button-variant(pink, red, red, #444, #333, red);
color: #fff;
}
https://www.codeply.com/go/EHwnjvUXac
这篇关于如何在Bootstrap 4和Sass中设置自定义按钮的文本颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文