Wie kann ich die Farbe der Bootstrap 4 Navbar-Umschalttaste ändern?

Anpassen der Farbe der Bootstrap 4 Navbar-Umschalttaste

Kontext:

Auf Bootstrap-Websites kleiner Bildschirme verfügen normalerweise über eine Hamburger-Menüschaltfläche zur Navigation. Diese Schaltfläche hat standardmäßig eine bestimmte Farbe.

Frage:

Können Sie die Farbe der Bootstrap 4-Navigationsleisten-Umschalttaste ändern?

Antwort:

Verwenden von Bootstraps Vordefinierte Stile:

Bootstrap 4 verwendet SVG-Hintergrundbilder für das Umschaltsymbol. Es gibt spezielle Klassen für verschiedene Stile:

• .navbar-dark: Helles Symbol auf dunklem Hintergrund
• .navbar-light: Dunkles Symbol auf hellem Hintergrund

Anpassen des Symbols:

Wenn diese vordefinierten Optionen nicht Ihren Anforderungen entspricht, können Sie ein benutzerdefiniertes SVG-Symbol mit den gewünschten Farben erstellen. Zum Beispiel:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

Dieser Code setzt die Symbolfarbe auf Rosa. Sie können die Werte in der Funktion rgba() an Ihre bevorzugte Farbe anpassen.

Verwendung externer Symbolbibliotheken:

Alternativ können Sie Symbole aus Bibliotheken wie Font verwenden Großartig, stellen Sie sicher, dass Sie die erforderlichen CSS-Klassen anwenden, um sie zu formatieren.

Updates in Bootstrap 4.0.0:

Früher als „navbar-inverse“ bekannt, heißt die dunkle Navbar-Klasse jetzt „navbar-dark“, wodurch hellere Farben für Links und die Umschalttaste erzeugt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich die Farbe der Bootstrap 4 Navbar-Umschalttaste ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!