ruby-on-rails - 使用 Bootstrap 更改按钮颜色

Question

我正在使用 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;
    }
}

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" %>

来源：样式化 twitter 引导按钮

Answer 2

在 Bootstrap 3buttonBackground中不再起作用，您必须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；}