如何在Bootstrap中更改btn颜色 [英] How to change btn color in Bootstrap

问题描述

有没有办法改变所有 .btn 属性在Bootstrap？我试过下面的，但有时它显示默认的蓝色（说，点击后，删除鼠标等）。如何更改整个主题？

Is there a way to change all .btn properties in Bootstrap? I have tried below ones, but still sometimes it shows the default blue color (say after clicking and removing the mouse etc). How can I change the entire theme altogether?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

推荐答案

您需要覆盖的属性是查看 Bootstrap的源代码，特别是 .button-variant 在 mixins / buttons.less 中定义的mixin。你仍然需要重写相当多的属性来摆脱所有的 .btn-primary 样式（例如：focus

The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).

更好的方法可以是：

1. 使用 Bootstrap的在线自定义工具


2. 手动创建自己的颜色类，例如 .btn-whatever


3. 使用LESS编译器并使用 .button- variant mixin来创建自己的颜色类，例如 .btn-whatever

1. Create your own customized version of Bootstrap using Bootstrap's online customization tool
2. Manually create your own color class, e.g. .btn-whatever
3. Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever

这篇关于如何在Bootstrap中更改btn颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！