Ä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

tl;dr - TWBSColor - Generiere deine eigene Bootstrap-Navigationsleiste

Versionshinweise:

• Online-Tool: Bootstrap 3.3.2+ / 4.0.0+
• Diese Antwort: Bootstrap 3.0.x
• Für Bootstrap 5.x, siehe Dokumentation

Verfügbare Navigationsleisten

Du hast zwei Grundnavigationsleisten:

Standardfarbverwendung

Hier sind die Hauptfarben und ihre Verwendung:

• #F8F8F8: Hintergrund der Navigationsleiste
• #E7E7E7: Bordüre der Navigationsleiste
• #777: Standardfarbe
• #333: Hover-Farbe (#5E5E5E für .nav-brand)
• #555: Aktive Farbe
• #D5D5D5: Aktiver Hintergrund

Standardstil

Wenn du einen benutzerdefinierten Stil hinzufügen möchtest, hier ist der CSS-Code, den du ändern musst:

/* Navigationsleiste */
.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;
    }
}

Beispiele für benutzerdefinierte farbige Navigationsleisten

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; }}}
}

Und schließlich ein kleines Geschenk

Ich habe gerade ein Skript erstellt, mit dem du dein eigenes Theme generieren kannst: TWBSColor - Generiere deine eigene Bootstrap-Navigationsleiste

[Update]: TWBSColor generiert jetzt SCSS/SASS/Less/CSS-Code.
[Update]: Ab sofort kannst du Less als die von TWBSColor bereitgestellte Standardsprache verwenden.
[Update]: TWBSColor unterstützt nun die Farbgebung von Dropdown-Menüs.
[Update]: TWBSColor ermöglicht es nun, deine Version zu wählen (Unterstützung für Bootstrap 4 hinzugefügt).

Answer 2

Bootstrap 5 (Update 2021)

Standardmäßig ist die Navbar in Bootstrap 5 transparent. Seit Bootstrap 4 hat sich nicht viel geändert, um die Hintergrundfarbe der Navbar, Textfarbe, Links, Dropdowns und Hover-Stile zu ändern.

/* ändere die Hintergrundfarbe */
.navbar-custom {
    background-color: #4433cc;
}

/* ändere die Marke und Textfarbe */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffcc00;
}

/* ändere die Linkfarbe */
.navbar-custom .navbar-nav .nav-link {
    color: #ffbb00;
}

/* ändere die Farbe von aktiven oder gehoverten Links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: pink;
}

/* nur für Dropdowns */
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: #ddaa11;
}

/* Textfarbe des Dropdown-Elements */
.navbar-custom .navbar-nav .dropdown-item {
    color: #000000;
}

/* Hover oder Fokus des Dropdown-Elements */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
    color: #eeeeee;
    background-color: red;
}

Bootstrap 5 Navbar-Farbdemo

---

Bootstrap 4.3 (Update 2020)

Das Ändern der Navbar-Farbe ist in Bootstrap 4 anders (und etwas einfacher). Sie können eine benutzerdefinierte Navbar-Klasse erstellen und diese dann referenzieren, um die Navbar zu ändern, ohne andere Bootstrap-Navs zu beeinflussen.

...

Bootstrap 4.3+

Der CSS, der benötigt wird, um die Navbar in Bootstrap 4 zu ändern, ist viel weniger...

.navbar-custom {
    background-color: #ff5500;
}
/* Ändere die Marken- und Textfarbe */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* Ändere die Linkfarbe */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* Ändere die Farbe von aktiven oder gehoverten Links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

Bootstrap 4 Benutzerdefinierte Navbar-Demo

Das Ändern der aktiven/gehoverten Linkhintergrundfarbe funktioniert auch mit demselben CSS, aber Sie müssen das Padding anpassen, wenn Sie möchten, dass die Hintergrundfarbe die volle Höhe des Links ausfüllt...

py-0 um das vertikale Padding der gesamten Navbar zu entfernen...

..

/* Ändere die Linkfarbe und das Padding */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* Ändere die Farbe und Hintergrundfarbe von aktiven Links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

Bootstrap 4 Ändere Link- und Hintergrundfarbe-Demo

Siehe auch: Wie ändere ich die Farbe des Bootstrap 4 Navbar-Schaltflächensymbols?

---

**Bootstrap 3**

        ...

        Titel

       ...

    .navbar-custom {
        background-color:#229922;
        color:#ffffff;
        border-radius:0;
    }

    .navbar-custom .navbar-nav > li > a {
        color:#fff;
    }

    .navbar-custom .navbar-nav > .active > a {
        color: #ffffff;
        background-color:transparent;
    }

    .navbar-custom .navbar-nav > li > a:hover,
    .navbar-custom .navbar-nav > li > a:focus,
    .navbar-custom .navbar-nav > .active > a:hover,
    .navbar-custom .navbar-nav > .active > a:focus,
    .navbar-custom .navbar-nav > .open >a {
        text-decoration: none;
        background-color: #33aa33;
    }

    .navbar-custom .navbar-brand {
        color:#eeeeee;
    }
    .navbar-custom .navbar-toggle {
        background-color:#eeeeee;
    }
    .navbar-custom .icon-bar {
        background-color:#33aa33;
    }

Benutzerdefinierte Navbar-Demo auf Bootply

---

Wenn die Navbar Dropdowns hat, fügen Sie Folgendes hinzu, um die Dropdown-Farbe(n) zu ändern:

/* nur für Dropdowns */
.navbar-custom .navbar-nav .dropdown-menu  { 
  background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
  color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
  color: #33aa33;
}

Demo mit Dropdown

---

Wenn Sie die Themenfarben insgesamt ändern möchten (über die Navbar hinaus), sehen Sie diese Antwort

Answer 3

Es hat eine Weile gedauert, aber ich habe herausgefunden, dass das folgende Hinzufügen es ermöglicht hat, die Farbe der Navigationsleiste zu ändern:

.navbar{ 
    background-image: none;
}

Answer 4

Mit Less arbeiten

Sie könnten auch in Betracht ziehen, Ihre eigene Version zu kompilieren. Versuchen Sie http://getbootstrap.com/customize/ (das einen separaten Abschnitt für die Navbar-Einstellungen hat (Standard-Navigation und Invertierte Navigation)) oder laden Sie Ihre eigene Kopie von https://github.com/twbs/bootstrap herunter.

Sie finden die Navbar-Einstellungen in variables.less. navbar.less wird verwendet, um die Navbar zu kompilieren (abhängig von variables.less und mixins.less).

Kopieren Sie den Abschnitt 'navbar-default' und füllen Sie Ihre eigenen Farbeinstellungen ein. Das Ändern der Variablen in variables.less ist der einfachste Weg (das Ändern der Standard- oder umgekehrten Navbar wird kein Problem sein, da Sie nur eine Navbar pro Seite haben).

In den meisten Fällen ändern Sie nicht alle Einstellungen:

// Navbar
// -------------------------

// Grundlagen einer Navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar-Links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar-Markenlabel
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar-Umschalter
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #ccc;
@navbar-default-toggle-border-color:       #ddd;

Sie könnten auch http://twitterbootstrap3navbars.w3masters.nl/ ausprobieren. Dieses Tool generiert CSS-Code für Ihre benutzerdefinierte Navbar. Optional könnten Sie auch Farbverläufe und Rahmen zur Navbar hinzufügen.

Answer 5

Müssen Sie das CSS direkt ändern? Was ist mit...