作者:Blunt_X | 来源:互联网 | 2022-12-25 09:13
我可以通过更改bootstrap v4中的主题颜色来更改主按钮颜色.但它也会影响所有其他组件.如何在不影响主题颜色的情况下设置主按钮颜色?我不想设置品牌 - 初级并实现它.还有其他选择吗?
1> Zim..:
2018年Bootstrap 4.1更新
现在Bootstrap 4使用SASS,您可以使用mixins 轻松更改按钮颜色button-variant
.由于您只想更改主要按钮颜色,而不是整个主要主题颜色,因此需要button-variant
在SASS中使用mixins.您可以设置任何$mynewcolor
和/或lighten()
和darken()
你想的百分比.
$mynewcolor:teal;
.btn-primary {
@include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-primary {
@include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
https://www.codeply.com/go/f3uTwmsCVZ(SASS演示)
这个SASS编译成以下CSS ...
.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#009a9a;border-color:teal}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
https://www.codeply.com/go/l9UGO7J6V1(CSS演示)
要更改所有上下文类(bg-primary,alert-primary等)的主要颜色,请参阅:自定义Bootstrap CSS模板以及如何更改引导原色?
另请参阅:https://stackoverflow.com/a/50973207/171456
这应该是可接受的答案,它涵盖了所有按钮状态。
参数是`button-variant(背景,边框颜色,悬停:背景颜色,悬停:背景颜色,活动:背景颜色,活动:背景颜色)`
2> Athul..:
试试这个方法
在这里添加一个类custom-btn并在我们的样式表中为它写css .button
.btn-primary.custom-btn {
background-color: #000;
border-color: #000;
}
3> 小智..:
您可以通过sass文件中的变量(引导4)更改自定义颜色或重新定义颜色。
$theme-colors: (
primary: red,
);
@import "~bootstrap/scss/bootstrap";
如果您对颜色使用相同的键,则将重新定义Bootstrap。否则,使用新键创建新的类。
本示例将原色从蓝色设置为红色。
4> Dhaval..:
根据引导文档
Bootstrap的许多组件都是使用基本修饰符类方法构建的。这意味着大部分样式包含在基类(例如.btn)中,而样式变体则限于修饰符类(例如.btn-danger)。这些修饰符类是从$ theme-colors映射构建的,以自定义修饰符类的数量和名称。
因此,如果您更改主题颜色,那么它将影响全部。
如果您还想在其他地方使用该颜色,也许应该在$ theme-colors变量中添加颜色。