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

问题描述

有没有办法更改 Bootstrap 中的所有 .btn 属性?我试过下面的，但有时它仍然显示默认的蓝色(比如在单击并移除鼠标等之后).如何完全更改整个主题?

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 的源代码，特别是 mixins/buttons.less.您仍然需要覆盖相当多的属性以摆脱所有 .btn-primary 样式(例如 :focus、disabled、在下拉菜单等中使用).

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 的在线自定义工具
创建您自己的自定义版本的 Bootstrap
2. 手动创建您自己的颜色类，例如.btn-whatever
3. 使用 LESS 编译器并使用 .button-variant 混合来创建您自己的颜色类，例如.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屋！