使用 Bootstrap 更改按钮颜色答案

【问题标题】：Using Bootstrap to Change Button Color使用 Bootstrap 更改按钮颜色
【发布时间】：2013-07-31 08:26:09
【问题描述】：

我正在使用 RoR 制作一个为期一个月的 rails 网站。这是来自 styles.css.scss 表的代码。它利用引导程序。我不确定为什么，但尽管有 $btnPrimaryBackground: green 文本，但按钮颜色并没有改变。有没有人对为什么按钮颜色没有改变有任何想法或想法？谢谢。

$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;
    }
}

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap-rails

【解决方案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

【讨论】：

我很抱歉 - 我将如何实现此代码？我是初学者
最诚挚的歉意 - 我不知道如何在我发布的代码中实现它......
好吧，您只需将 button_tag 代码粘贴到您想要的任何视图中。
你给的按钮代码和我用的那个有什么区别（即一个是class:，另一个是:class）？再次感谢！
我看不出你在哪里使用了类：但无论如何，给符号一个值基本上是两种不同的方式。一个使用的是 hashrocket 语法，即 :symbol => value，而你提到的那个只是使用这个语法符号：value。无论如何，如果我的帖子对您有所帮助，请不要忘记将其标记为答案。祝你好运！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：