Использование Bootstrap для изменения кнопки Цвет

Question

Я использую RoR, чтобы создать веб-сайт на один месяц. Это код из листа 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

Если вы используете 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-умолчанию. В SCSS:

.btn-custom {@extend .btn; @extend .btn-default; цвет: # 6EA81A; }