如何更改Bootstrap版本4按钮颜色

css CSS

Stafan小宇宙

2020-03-24

我可以通过更改bootstrap v4中的主题颜色来更改主按钮的颜色。但这也会影响所有其他组件。如何设置主按钮颜色而不影响主题颜色?我不想设置主要品牌并实现这一目标。还有其他选择吗?

第3357篇《如何更改Bootstrap版本4按钮颜色》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
蛋蛋 2020.03.24
<a  class="btn btn-secondary" href="#">Find out more</a>



.featured  .btn-secondary {
     font-weight: bold;
     background-color: blue;
}

只需在CSS中编辑它对我有用

小小村村 2020.03.24

您可以通过sass文件中的变量(Bootstrap 4)更改自定义颜色或重新定义颜色。

$theme-colors: (
   primary: red,
);
@import "~bootstrap/scss/bootstrap";

如果为颜色使用相同的键,则将重新定义Bootstrap。否则,使用新键创建新的类。

本示例将原色从蓝色设置为红色

理查德Tom 2020.03.24

根据引导文档

Bootstrap的许多组件都是使用基本修饰符类方法构建的。这意味着大部分样式包含在基类(例如.btn)中,而样式变体则限于修饰符类(例如.btn-danger)。这些修饰符类是从$ theme-colors映射构建的,以自定义修饰符类的数量和名称。

因此,如果您更改主题颜色,那么它将影响全部。

如果您也想在其他地方使用该颜色,也许应该在$ theme-colors变量中添加颜色

西门小卤蛋 2020.03.24

试试这个方法

添加button,这里custom-btn,并在样式表中为此编写css

.btn-primary.custom-btn {
	background-color: #000;
	border-color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<button type="button" class="btn btn-primary custom-btn">Custom</button>
  <button type="button" class="btn btn-primary">Default</button>
</div>

卡卡西Near 2020.03.24

Bootstrap 4.1+的2019更新

现在,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/f3uTwmsCVZSASS演示

该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/l9UGO7J6V1CSS演示


To change the primary color for all contextual classes (bg-primary, alert-primary, etc..) see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?

Also see:
https://stackoverflow.com/a/50973207/171456
How to theme bootstrap

逆天小小 2020.03.24

您必须创建一个自定义的CSS工作表并覆盖按钮样式,或将按钮添加到新类并覆盖某些属性。

<button class="btn-primary">Button</button>

.btn-primary{
    background-color:black;
}

<button class="btn-primary custom-btn-class">Button</button>

.custom-btn-class{
     background-color:black;
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android