Question

我正在使用RoR制作一个月的rails网站。这是styles.css.scss表中的代码。它利用bootstrap。我不确定为什么，但按钮颜色不会改变尽管$ 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;
    }
}

Answer 1

如果你使用LESS的Bootsrap，你可以简单地做：

.btn-primary {
  .buttonBackground(@yourColor, @yourColorDarker); //(button, hover)
}

如果没有，那么您只需覆盖要更改颜色的按钮类：

.btn-warning { background-color: Your color; } //button

.btn-warning:hover { background-color: Your color; } //hover

此外，由于您似乎想要将按钮颜色更改为绿色，为什么不使用.btn-success类，如下所示：

<%= button_tag "Hello", :class => "btn btn-success" %>

来源：Styling twitter bootstrap buttons

Answer 2

在Bootstrap 3中buttonBackground不再起作用，你必须像这样使用button-variant(@color; @background; @border)：

.btn-custom {
    .button-variant(@custom-color, @custom-color-bg, @custom-color-border);
}

Answer 3

您也可以创建自己的并继承自.btn-default。在这样的SCSS中：

.btn-custom {@extend .btn; @extend .btn-default;颜色：＃6EA81A; }

使用Bootstrap更改按钮颜色

3 个答案: