Wie kann ich die Hintergrundfarbe der Navigationsleiste des Twitter Bootstrap 2.0.2 ändern? Wie kann ich die Farbe aller Elemente der Navigationsleiste ändern, um die Hintergrundfarbe wiederzugeben?
colors
twitter-bootstrap
navbar
Tätowierung
quelle
quelle
Antworten:
Sie können die Bootstrap-Farben, einschließlich der
.navbar-inner
Klasse, überschreiben , indem Sie sie in Ihrem eigenen Stylesheet als Ziel festlegen, anstatt das Bootstrap.css-Stylesheet wie folgt zu ändern:Sie müssen nur alle diese Stile mit Ihren eigenen ändern, und sie werden aufgenommen, wie zum Beispiel so etwas, bei dem ich alle Verlaufseffekte eliminiere und einfach eine feste schwarze Hintergrundfarbe einstelle:
Sie können Tools wie den Colorzilla- Verlaufseditor verwenden, eigene Verlaufsfarben für alle Browser erstellen und die Originalfarben durch Ihre eigenen ersetzen.
Und wie ich in den Kommentaren erwähnt habe, würde ich nicht empfehlen, das Stylesheet bootstrap.css direkt zu ändern, da alle Ihre Änderungen verloren gehen, sobald das Stylesheet aktualisiert wird (aktuelle Version ist v2.0.2 ). Daher wird bevorzugt, dass Sie alle einbeziehen Ihre Änderungen in Ihrem eigenen Stylesheet zusammen mit dem Stylesheet bootstrap.css. Denken Sie jedoch daran, alle entsprechenden Eigenschaften zu überschreiben, um die Konsistenz zwischen den Browsern zu gewährleisten.
quelle
background-image: none;
sechsmal?Eine ausgezeichnete Quelle, um zu sehen, wie man Bootstrap thematisiert, ist: bootswatch.com . Es hat schöne Beispiele und zeigt auch Code. Kurz gesagt, sie verwenden lessc, um die Datei bootstrap.css in Ihre neue color-theme.css neu zu kompilieren. Das Schöne an ihrem Ansatz ist, dass er auf Bootstrap aufbaut. Wenn also Bootstrap aktualisiert wird, kompilieren Sie ihn einfach neu.
Links zur Verwendung von Lessc und Bootstrap:
quelle
Wenn Sie keine Zeit haben, "weniger" zu lernen oder es richtig zu machen, ist hier ein schmutziger Hack ...
Fügen Sie dies oben hinzu, wo Sie das HTML der Bootstrap-Navigationsleiste rendern - aktualisieren Sie die Farben nach Bedarf.
quelle
Sie können eine benutzerdefinierte Version von Bootstrap herunterladen und @navbarBackground auf die gewünschte Farbe einstellen.
http://twitter.github.com/bootstrap/customize.html
quelle
Ich verwende Bootstrap Version 3.2.0 und es sieht so aus, als ob .navbar-inner nicht mehr existiert.
Die Lösungen hier, die darauf hindeuten, .navbar-inner zu überschreiben, haben bei mir nicht funktioniert - die Farbe blieb gleich.
Die Farbe hat sich nur geändert, als ich .navbar wie unten gezeigt überschrieben habe:
quelle
Der derzeit beste Weg, dies zu tun, besteht darin, den LESS-Befehlszeilencompiler mit zu installieren
Wenn Sie dies getan haben, gehen Sie in den Ordner less im Verzeichnis und bearbeiten Sie die Datei variables.less. Sie können viele Variablen entsprechend Ihren Anforderungen ändern, einschließlich der Farbe der Navigationsleiste
Sobald Sie dies getan haben, gehen Sie zu Ihrem Bootstrap-Verzeichnis und führen Sie den Befehl make aus.
quelle
Wenn Sie WENIGER verwenden, können Sie Mixins für weniger Code verwenden. Hier füge ich einen Verlauf, einen Rand und einen Randradius hinzu:
* Wenn Sie das Rails-Juwel Twitter-Bootstrap-Rails verwenden, mache ich dies direkt in der Datei bootstrap_and_overrides.css.less *
quelle
das ist was ich mache
Es funktioniert gut für alle Navigatoren. Sie können die Demo hier http://caverne.fr oben sehen
quelle
In der Zeile 4784 von bootstrap.css sehen wir:
Sie müssen alle Eigenschaftsdeklarationen für das Hintergrundbild entfernen, um den gewünschten Effekt zu erzielen.
quelle
Würde Occams Rasiermesser nicht sagen, dass Sie dies nur tun sollen, bis Sie etwas Komplexeres benötigen? Es ist ein bisschen wie ein Hack, kann aber den Bedürfnissen von jemandem entsprechen, der eine schnelle Lösung wünscht.
quelle
Wenn Sie die LESS- oder SASS-Version des Bootstraps verwenden. Am effizientesten ist es, den Variablennamen in der Datei LESS oder SASS zu ändern.
Dies ist bei weitem die einfachste und effizienteste Möglichkeit, die Bootstraps-Navigationsleiste zu ändern. Sie müssen keine Überschreibungen schreiben, und der Code bleibt sauber.
quelle
Sie können Ihre eigene Version auf der offiziellen Bootstrap-Website anpassen .
quelle
Ich überschreibe eigentlich nur alles, was ich in der site.css ändern möchte. Sie sollten die site.css nach dem Bootstrap laden, damit die Klassen überschrieben werden. Was ich jetzt getan habe, ist, meine eigenen Klassen mit meinem eigenen kleinen Bootstrap-Thema zu machen. Kleinigkeiten wie diese
Auf die gleiche Weise habe ich auch die Art der Validierungsfehler geändert.
quelle