Navbar Farbe in Twitter Bootstrap
Wie kann ich die Hintergrundfarbe der navbar der Twitter Bootstrap 2.0.2? Wie kann ich die Farbe ändern alle Elemente der Navigationsleiste entsprechend die Hintergrundfarbe?
Kommentar zu dem Problem
Gelöst. Änderungen in der bootstrap.css .navbar-inner { background-color: #2c2c2c; geändert "background-color", kommentiert alles andere. Danke. Kommentarautor: Gattoo
empfehlen nicht, ändern Sie das bootstrap-Haupt-css-stylesheet ganz einfach, weil, wenn Sie update dem stylesheet, das alle Ihre änderungen werden verloren, daher nur beinhalten, was auch immer änderungen, die Sie brauchen, in Ihrem eigenen stylesheet. Kommentarautor: Andres Ilich
Dank Andres, Was sind die anderen Möglichkeiten, um das Verhalten der Bootstrap? Die navbar ist ein Schmerz für die meisten Seiten, wie Sie die Menschen sind einfach nicht in der Lage zu glauben, dass web so gut für die ästhetik wie für die Funktionalität. Kommentarautor: Gattoo
Sie können tatsächlich überschreiben die meisten bootstrap-Regeln in einem eigenen stylesheet, brauchen Sie nicht zu berühren, die bootstrap.css stylesheet an alle. Diese Weise, wenn der bootstrap aktualisiert wird, können Sie einfach aktualisieren Sie das sofort und alle änderungen von dir werden bleiben, und auch auf diese Weise können Sie überschreiben die boostrap-Stile an Ihre Bedürfnisse anpassen (Schriftarten und Farben) Ihrer Website. Kommentarautor: Andres Ilich
Viel einfacher beantworten: stackoverflow.com/questions/18529274/... Kommentarautor: Chris Johnson
InformationsquelleAutor der Frage Gattoo | 2012-03-26
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie überschreiben die bootstrap-Farben, darunter die
.navbar-inner
Klasse, durch welche es in Ihrer eigenen stylesheet-im Gegensatz zur änderung der bootstrap.css-stylesheet, etwa so:Sie nur ändern müssen, um all diese Stile mit Ihren eigenen, und Sie wird abgeholt zu bekommen, wie so etwas wie dieses zum Beispiel, wo ich alle beseitigen gradient-Effekt und setzen Sie einfach solid black background-color:
Können Sie die Vorteile von tools wie der Colorzilla Gradient-Editor und erstellen Sie Ihre eigenen Gradienten Farben für alle Browser und ersetzen Sie die original-Farben mit Ihrem eigenen.
Und wie ich bereits erwähnt auf die Kommentare, ich würde nicht empfehlen, ändern Sie das bootstrap.css-stylesheet-direkt als alle Ihre änderungen gehen verloren, sobald das stylesheet aktualisiert wird (aktuelle version ist v2.0.2), so ist es bevorzugt, dass Sie alle Ihre änderungen in Ihrem eigenen stylesheet, der im tandem mit bootstrap.css-stylesheet. Aber denken Sie daran, überschreiben die entsprechenden Eigenschaften um Konsistenz in allen Browsern.
InformationsquelleAutor der Antwort Andres Ilich
Eine hervorragende Ressource, um zu sehen, wie theme-bootstrap: bootswatch.com. Es hat schöne Beispiele und zeigt-code als auch. Kurz, Sie verwenden lessc zum kompilieren der bootstrap.css-zu Ihren neuen color-Design.css. Die nette Sache von Ihr Ansatz ist, dass ist bauen auf bootstrap, so dass, wenn bootstrap aktualisiert wird, wird Sie einfach neu kompilieren.
Links über die Verwendung lessc und bootstrap:
InformationsquelleAutor der Antwort Alexander Poslavsky
Wenn Sie Haven ' T got Zeit, zu lernen, "weniger" oder tun Sie es richtig, hier ein dirty hack...
Fügen Sie diese oben, wo Sie machen die bootstrap-nav-bar HTML - aktualisieren Sie die Farben wie nötig.
InformationsquelleAutor der Antwort JGilmartin
Können Sie eine benutzerdefinierte version von bootstrap und set @navbarBackground der Farbe, die Sie wollen.
http://twitter.github.com/bootstrap/customize.html
InformationsquelleAutor der Antwort Andrew Thomas
Ich bin mit der Bootstrap-version 3.2.0 und so wie es aussieht .navbar-inner gibt es nicht mehr.
Den Lösungen, die hier vorgeschlagen überschreiben .navbar-inner funktionierte bei mir nicht - die Farbe blieb gleich.
Die Farbe nur geändert, wenn ich überschrieb .navbar, wie unten gezeigt:
InformationsquelleAutor der Antwort paulo62
Der beste Weg momentan, das gleiche zu tun zu installieren wäre WENIGER Kommandozeilen-compiler mit
Sobald Sie dies getan haben, dann gehen Sie zu den weniger Ordner in das Verzeichnis und Bearbeiten Sie dann die Datei Variablen.weniger und Sie können eine Menge von Variablen je nachdem, was Sie benötigen, einschließlich der Farbe der navigation bar
Sobald Sie dies getan haben, gehen Sie zu Ihrer bootstrap-Verzeichnis und führen Sie den Befehl stellen.
InformationsquelleAutor der Antwort gauravmunjal
Wenn Sie WENIGER, können Sie mit Mixins in Verbindung für weniger code. Hier trage ich ein gradient, border und border-radius:
*Wenn Sie mit dem rails-gem -, twitter-bootstrap-rails ist, kann ich dies direkt in der Datei bootstrap_and_overrides.css.weniger*
InformationsquelleAutor der Antwort Ryan
das ist, was ich tun
es funktioniert gut für alle navigator
sehen Sie demo hier http://caverne.fr auf der Oberseite
InformationsquelleAutor der Antwort user2545728
In der bootstrap.css Linie 4784 wir sehen:
Müssen Sie entfernen Sie alle 'background-image' property-Deklarationen, um die gewünschte Wirkung zu erzielen.
InformationsquelleAutor der Antwort Roopkunwar
Wäre nicht occam ' s razor sagen, nur tun Sie dies, bis Sie etwas mehr Komplex? Es ist ein bisschen ein hack, aber kann die Bedürfnisse von jemand, der will eine schnelle Lösung.
InformationsquelleAutor der Antwort Krishan Gupta
Wenn Sie mit WENIGER oder SASS-Version von Bootstrap. Der effizienteste Weg ist, um ändern Sie den Namen der Variablen, in der WENIGER oder SASS-Datei.
Diese bei weitem die einfachste und die effizienteste Art und Weise zu ändern, die Bootstraps Navbar. Sie müssen nicht schreiben, überschreibt, und der code bleibt sauber.
InformationsquelleAutor der Antwort Ronak Jain
Können Sie anpassen, Ihre eigene version auf die Bootstrap-offizielle website.
InformationsquelleAutor der Antwort Samuel
Ich eigentlich nur überschreiben alles, was ich ändern wollen in der Website.css, laden Sie die Seite.css nach der bootstrap-so wird es überschreiben die Klassen. Was habe ich getan, jetzt ist nur meine eigene Klassen, die mit meiner eigenen kleinen bootstrap-theme. Kleine Dinge, wie dieser
Habe ich auch geändert, die gerne von der Validierungs-Fehler, die auf die gleiche Weise.
InformationsquelleAutor der Antwort Michael