Cách mở rộng các lớp học bootstrap

Question

Tôi thực hiện các bước đầu tiên của mình với Twitter Bootstrap và cần mở rộng các thành phần. Ví dụ: tôi muốn thay đổi nền thanh điều hướng, nhưng không thay đổi tệp css gốc. Và các sửa đổi khác. tôi cố gắng tạo ra một lớp mới (.test) với nền mới:

.test{ 
    background-color: red !important; 
} 

Và invoques trong HMTL:

<div class="navbar navbar-fixed-top test"> 

Nhưng, không hoạt động. Làm cách nào để thực hiện việc này? và nhiều hơn nữa .... Bất kỳ ý tưởng nào?

Answer 1

Có một vài cách để tùy chỉnh/mở rộng các lớp Bootstrap được tất cả các thảo luận ở đây: Twitter Bootstrap Customization Best Practices

Nếu bạn có ý định để ghi đè lên phong cách boostrap với CSS tùy chỉnh riêng của bạn, bạn nên tránh sử dụng !important vì điều này nói chung là một xấu thực hành.

Trong trường hợp của navbar, yếu tố mà có background-color là navbar-inner vì vậy bạn có muốn ghi đè lên như thế này:

.test .navbar-inner{ 
    background-color: red; 
} 

dụ Tuỳ chỉnh navbar: http://bootply.com/61032