Sử dụng Bootstrap để thay đổi màu nút

Question

Tôi đang sử dụng RoR để tạo trang web đường ray một tháng. Đây là mã từ trang styles.css.scss. Nó sử dụng bootstrap. Tôi không chắc chắn là tại sao nhưng màu nút không thay đổi mặc dù $ btnPrimaryBackground: văn bản màu xanh lá cây. Có ai có bất kỳ ý tưởng hay suy nghĩ về lý do tại sao màu sắc nút không thay đổi? Cảm ơn.

$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

Nếu bạn đang sử dụng Bootsrap với LESS, bạn chỉ có thể làm:

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

Nếu không thì bạn chỉ cần ghi đè lớp nút mà bạn muốn thay đổi màu sắc:

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

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

Hơn nữa, vì có vẻ như bạn muốn thay đổi màu của nút thành màu xanh lục vì sao bạn không sử dụng lớp .btn-success như sau:

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

Nguồn: Styling twitter bootstrap buttons

Answer 2

Trong Bootstrap 3 buttonBackground không hoạt động nữa, bạn phải sử dụng button-variant(@color; @background; @border) như thế này:

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

Answer 3

Bạn cũng có thể làm của riêng bạn và kế thừa từ .btn mặc định. Trong SCSS như sau:

.btn-custom {@extend .btn; @extend .btn-default; màu sắc: # 6EA81A; }