Wie würde ich das CSS ändern, um die Farbe der Navigationsleiste in Twitter Bootstrap zu ändern?
tl; dr - TWBSColor - Generieren Sie Ihre eigene Bootstrap-Navigationsleiste
Versionshinweise: - Online-Tool: Bootstrap 3.3.2+ / 4.0.0+ - Diese Antwort: Bootstrap 3.0.x.
Sie haben zwei grundlegende Navigationsleisten:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>Hier sind die Hauptfarben und ihre Verwendung:
#F8F8F8: navbar Hintergrund#E7E7E7: navbar Grenze#777: Standardfarbe#333: Schwebefarbe ( #5E5E5Efür .nav-brand)#555: aktive Farbe#D5D5D5: aktiver HintergrundWenn Sie einen benutzerdefinierten Stil festlegen möchten, müssen Sie das folgende CSS ändern:
/* navbar */
.navbar-default {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}Hier sind vier Beispiele für eine benutzerdefinierte farbige Navigationsleiste:
Und der SCSS-Code:
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}Ich habe gerade ein Skript erstellt, mit dem Sie Ihr Thema generieren können: TWBSColor - Generieren Sie Ihre eigene Bootstrap-Navigationsleiste
[Update]: TWBSColor generiert jetzt SCSS / SASS / Less / CSS-Code.
[Update]: Ab sofort können Sie Less als Standardsprache von TWBSColor verwenden.
[Update]: TWBSColor unterstützt jetzt die Färbung von Dropdown-Menüs.
[Update]: TWBSColor ermöglicht jetzt die Auswahl Ihrer Version (Bootstrap 4-Unterstützung hinzugefügt).
!importantam Ende jeder der ausgegebenen CSS-Anweisungen scheint das Problem behoben zu haben. Beispiel:color: #ffffff;wirdcolor: #ffffff !important;.Update 2020
Das Ändern der Navbar-Farbe ist in Bootstrap 4 anders (und etwas einfacher) . Sie können eine benutzerdefinierte Navigationsleistenklasse erstellen und dann darauf verweisen, um die Navigationsleiste zu ändern, ohne andere Bootstrap-Navigationsfunktionen zu beeinträchtigen.
Bootstrap 4.3+
Das zum Ändern der Navigationsleiste erforderliche CSS ist in Bootstrap 4 ...
Bootstrap 4 Benutzerdefinierte Navbar-Demo
Ändern der aktiven / Hover - Link Hintergrundfarbe funktioniert auch mit dem gleichen CSS, aber Sie müssen die Polsterung anpassen , wenn Sie die BG - Farbe über die volle Höhe der Verbindung füllen wollen ...
py-0vertikale Polsterung von der gesamten Navigationsleiste entfernen ...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>Bootstrap 4 Ändern Sie die Demo für Link und Hintergrundfarbe
Siehe auch: Bootstrap 4 Ändern Sie die Hamburger Toggler-Farbe
Bootstrap 3
Benutzerdefinierte Navbar-Demo bei Bootply
Wenn die Navigationsleiste Dropdowns enthält, fügen Sie Folgendes hinzu, um die Dropdown-Farbe (n) zu ändern:
Demo mit Dropdown
quelle
Es hat eine Weile gedauert, aber ich habe festgestellt, dass es durch die folgenden Schritte möglich war, die Farbe der Navigationsleiste zu ändern:
quelle
background-imagehinzugefügt, der die Funktionsweise von TWBSColor beeinträchtigen würde. Könnte ich bitte die Version Ihres Bootstraps und Ihre Umgebung kennen? (zusätzliches Thema, CSS-Bibliotheken ...)Weniger verwenden
Sie können auch Ihre eigene Version kompilieren. Versuchen Sie es mit http://getbootstrap.com/customize/ (mit einem separaten Abschnitt für die Navbars-Einstellungen (Standard-Navbar und invertierte Navbar)) oder laden Sie Ihre eigene Kopie von https://github.com/twbs/bootstrap herunter .
Sie finden die Navbar-Einstellungen in
variables.less.navbar.lesswird zum Kompilieren der Navigationsleiste verwendet (abhängig vonvariables.lessundmixins.less).Kopieren Sie den 'Navbar-Standardabschnitt' und geben Sie Ihre eigenen Farbeinstellungen ein. Ändern der Variablen in
variables.lessist am einfachsten (das Ändern der Standard- oder der inversen Navigationsleiste ist kein Problem, da Sie nur eine Navigationsleiste pro Seite haben).In den meisten Fällen werden Sie nicht alle Einstellungen ändern:
Sie können auch http://twitterbootstrap3navbars.w3masters.nl/ ausprobieren . Dieses Tool generiert CSS-Code für Ihre benutzerdefinierte Navigationsleiste. Optional können Sie der Navigationsleiste auch Verlaufsfarben und Rahmen hinzufügen.
quelle
Fügen Sie der HTML-Navigationsleiste einfach eine ID hinzu, z.
Mit dieser ID können Sie die Farbe der Navigationsleiste, aber auch die Links und Dropdowns gestalten
Beispiele für verschiedene Arten von Navigationsleisten
Schwarz
Gelb
Dunkelblau
Rote Kirsche)
Dunkelgrün
Hier ist das CSS
quelle
Müssen Sie das CSS direkt ändern? Wie wäre es mit...
quelle
Versuchen Sie das auch. Das hat bei mir funktioniert.
quelle
Wenn es nur darum geht, die Farbe der Navigationsleiste zu ändern, würde ich Folgendes empfehlen: Bootstrap Magic . Sie können die Werte für verschiedene Eigenschaften der Navigationsleiste ändern und eine Vorschau anzeigen.
Laden Sie das Ergebnis als benutzerdefiniertes CSS-Stylesheet oder als Datei mit weniger Variablen herunter. Sie können Werte mit Eingabefeldern und Farbwählern ändern.
quelle
Stellen Sie in diesem Navigationsleisten-CSS die eigene Farbe ein:
quelle
Beispiel
Probieren Sie es einfach so aus:
Datei
navabr.cssDie Standardverwendungen für Hauptfarben sind wie folgt:
Weitere Informationen finden Sie unter So ändern Sie die Farbe der Navigationsleiste in Twitter Bootstrap 3 .
quelle
Inverse und Standardklassennamen, die in Twitter Bootstrap erwähnt werden, führen dazu, dass sie schwarz-weiß sind.
Besser, Sie sollten das nicht überschreiben und eine Klasse in der Nähe hinzufügen und einen bestimmten Stil dafür schreiben:
quelle
Verwenden:
25+ Bootstrap Nav Menüs Code
quelle