Ändern der Navigationsleistenfarbe in Twitter Bootstrap

Question

Wie würde ich vorgehen, um das CSS zu ändern, um die Farbe der Navigationsleiste in Twitter Bootstrap zu ändern?

Answer 1

Versuche das auch. Das hat bei mir funktioniert.

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  Hintergrundfarbe: #00a950;
  Farbe: #000000;
}

Answer 2

Wenn es nur um die Änderung der Farbe der Navbar geht, würde ich vorschlagen, Bootstrap Magic zu verwenden. Sie können die Werte für verschiedene Eigenschaften der Navbar ändern und eine Vorschau sehen.

Laden Sie das Ergebnis als benutzerdefiniertes CSS-Stylesheet oder als Less-Variablen-Datei herunter. Sie können Werte mit Eingabefeldern und Farbauswahlern ändern.

Answer 3

In dieser Navbar-CSS, eigene Farbe einstellen:

/* Navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Titel */
.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;
}
/* Zeiger */
.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;
}

Answer 4

Beispiel

Probieren Sie es einfach so aus:

Datei navabr.css

/* Navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Titel */
.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;
    }
}

Die Standard-Hauptfarben sind wie folgt:

• Navbar-Hintergrund: #F8F8F8
• Navbar-Rand: #E7E7E7
• Standardfarbe: #777
• Nav-brand Hover-Farbe: #5E5E5E
• Hover-Farbe: #333
• Aktiver Hintergrund: #D5D5D5
• Aktive Farbe: #555

Sie können mehr erfahren in Um die Navbar-Farbe in Twitter Bootstrap 3 zu ändern.

Answer 5

Die Angabe der Klassen "inverse" und "default" in Twitter Bootstrap führt dazu, dass sie schwarz-weiß sind.

Besser ist es, diese Angabe nicht zu überschreiben und stattdessen eine Klasse hinzuzufügen und Ihren speziellen Stil dafür zu schreiben:

my_style{
    background-color: green;
}