twitter-bootstrap 更改引导程序按钮的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46697652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing color of bootstrap button
提问by J.G.Sable
This is a stupid question, because I feel I should know the answer and thought my code would have done the job.
这是一个愚蠢的问题，因为我觉得我应该知道答案并认为我的代码可以完成这项工作。
But I'm using bootstrap and I'm attempting to change the btn btn-primary class from the default blue to something else.
但是我正在使用引导程序，并且我正在尝试将 btn btn-primary 类从默认的蓝色更改为其他内容。
Here is my html:
这是我的 html：
<input type="text" class="form-control" placeholder="Search by user name, member type, genre...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
And my CSS:
还有我的 CSS：
.btn btn-primary:hover,
.btn btn-primary:focus,
.btn btn-primary:active,
.btn btn-primary.active {
color: #ffffff;
background-color: pink;
border-color: pink;
}
But it still looks like this:
但它仍然是这样的：
回答by Rafael Thomazetti
Since btnshares its class with the same element named btn-primary, your CSS selectors should look like
由于btn与名为 的相同元素共享其类，因此btn-primary您的 CSS 选择器应如下所示
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
color: #ffffff;
background-color: pink;
border-color: pink;
}回答by WebDragon
Be sure your override is loading AFTER the default bootstrap, or if you're using npm and compiling your own, be sure that your variable overrides are placed after the bootstrap defaults
确保您的覆盖在默认引导程序之后加载，或者如果您使用 npm 并编译自己的，请确保您的变量覆盖放置在引导程序默认值之后
in the bootstrap.css (BS4) btn-primary classes are defined as follows: (note that it is NOT necessary to preface these classes with .btn.btn-primary, just .btn-primary... The previous answer is not actually correct, but it works because of specificity.:-)
在 bootstrap.css (BS4) 中，btn-primary 类定义如下：（请注意，这些类没有必要以 .btn.btn-primary 开头，只需 .btn-primary ......之前的答案实际上不是正确，但由于特殊性，它有效。:-)
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary:focus, .btn-primary.focus {
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
.btn-primary.disabled, .btn-primary:disabled {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
background-color: #0069d9;
background-image: none;
border-color: #0062cc;
}If you fill all these out in your theme, just be sure your theme alterations load after bootstrap does.
如果您在主题中填写所有这些，请确保在引导程序完成后加载您的主题更改。
