Ruby-on-rails 使用 Bootstrap 更改按钮颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17959757/
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
Using Bootstrap to Change Button Color
提问by don
I'm using RoR to make a one-month rails website. This is the code from the styles.css.scss sheet. It utilizes bootstrap. I am unsure as to why but the button color does not change despite the $btnPrimaryBackground: green text. Does anyone have any ideas or thoughts on why the button color doesn't change? Thanks.
我正在使用 RoR 制作一个为期一个月的 Rails 网站。这是来自styles.css.scss 表的代码。它使用引导程序。我不确定为什么但按钮颜色没有改变，尽管 $btnPrimaryBackground: 绿色文本。有没有人对为什么按钮颜色没有改变有任何想法或想法？谢谢。
$baseFontFamily: Oxygen;
@import url(http://fonts.googleapis.com/css?family=Oxygen);
$navbarBackgroundHighlight: white;
$navbarBackground: white;
$btnPrimaryBackground: green;
@import 'bootstrap';
body{
padding-top: 60px;
}
@import 'bootstrap-responsive';
.navbar-inner{
@include box-shadow(none !important);
border: 0;
}
.footer{
margin-top: 50px;
color: $grayLight;
a{
color: $gray;
}
}
采纳答案by amb110395
If you are using Bootsrap with LESS, you can simply do:
如果您在 LESS 中使用 Bootsrap，您可以简单地执行以下操作：
.btn-primary {
.buttonBackground(@yourColor, @yourColorDarker); //(button, hover)
}
If not then you simply override the button class which you want to change color:
如果不是，那么您只需覆盖要更改颜色的按钮类：
.btn-warning { background-color: Your color; } //button
.btn-warning:hover { background-color: Your color; } //hover
Furthermore, since it appears you want to change the button color to green why dont you use the .btn-success class like so:
此外，既然您似乎想将按钮颜色更改为绿色，为什么不像这样使用 .btn-success 类：
<%= button_tag "Hello", :class => "btn btn-success" %>
Source: Styling twitter bootstrap buttons
来源：设计twitter bootstrap 按钮
回答by Eric Marcos
In Bootstrap 3 buttonBackgrounddoesn't work anymore, you have to use button-variant(@color; @background; @border)like this:
在 Bootstrap 3buttonBackground中不再工作，你必须button-variant(@color; @background; @border)像这样使用：
.btn-custom {
.button-variant(@custom-color, @custom-color-bg, @custom-color-border);
}
回答by Mike
You can also make your own and inherit from .btn-default. In SCSS like this:
您也可以创建自己的并从 .btn-default 继承。在像这样的 SCSS 中：
.btn-custom { @extend .btn; @extend .btn-default; color: #6EA81A; }
.btn-custom { @extend .btn; @extend .btn-default; 颜色：#6EA81A；}
