6

RoR を使用して、1 か月の Rails Web サイトを作成しています。これは、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;
    }
}
4

3 に答える 3

5

Bootsrap を LESS で使用している場合は、次のように簡単に実行できます。

.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 ブートストラップ ボタンのスタイリング

于 2013-07-31T01:27:07.997 に答える
2

Bootstrap 3buttonBackgroundではもう動作しません。次のように使用する必要がありますbutton-variant(@color; @background; @border)。

.btn-custom {
    .button-variant(@custom-color, @custom-color-bg, @custom-color-border);
}
于 2014-05-28T11:14:53.263 に答える
0

独自のものを作成して .btn-default から継承することもできます。SCSS では次のようになります。

.btn-custom { @extend .btn; @extend .btn-default; 色: #6EA81A; }

于 2015-03-23T18:44:33.063 に答える