Come estendere le classi di bootstrap

Question

Faccio i primi passi con Bootstrap su Twitter e ho bisogno di estendere i componenti. Ad esempio, desidero cambiare lo sfondo della barra di navigazione, ma senza modificare il file css originale. E altre modifiche. cerco di creare una nuova classe (.test) con il nuovo sfondo:

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

E invoques in HTML:

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

Ma, non funziona. Come si può fare? e altro .... Qualche idea?

Answer 1

ci sono un paio di modi per personalizzare/estendere le classi bootstrap che sono tutti discussi qui: Twitter Bootstrap Customization Best Practices

Se avete intenzione di ignorare gli stili bootstarp con il proprio CSS personalizzato si dovrebbe evitare di utilizzare !important come questa è generalmente una cattiva pratica.

Nel caso del navbar, l'elemento che ha il background-color è navbar-inner in modo che ci si vuole sostituire in questo modo:

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

esempio personalizzato barra di navigazione: http://bootply.com/61032