Wie erweitern Bootstrap-Klassen

Question

Ich mache meine ersten Schritte mit Bootstrap Twitter, und müssen Komponenten erweitern. Zum Beispiel möchte ich den Navbar-Hintergrund ändern, aber ohne die ursprüngliche CSS-Datei zu ändern. Und andere Modifikationen. Ich versuche, eine neue Klasse (.test) erstellen mit dem neuen Hintergrund:

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

Und invoques in der HMTL:

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

Aber nicht funktioniert. Wie kann das tun? und mehr .... Irgendwelche Ideen?

Answer 1

Es gibt ein paar Möglichkeiten anpassen/Bootstrap Klassen zu erweitern, die alle hier diskutiert werden: Twitter Bootstrap Customization Best Practices

Wenn Sie beabsichtigen, die Bootstrap-Arten mit Ihrem eigenen CSS außer Kraft zu setzen, sollten Sie mit !important vermeiden, da dies in der Regel ein schlechtes ist trainieren.

Im Falle des navbar, das Element, das die Hintergrundfarbe hat, ist navbar-inner so würden Sie wie folgt außer Kraft setzen möchten:

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

Benutzerdefinierte navbar Beispiel: http://bootply.com/61032