Wie passe ich die Farbe des Bootstrap 4 Navbar-Hamburger-Menüsymbols an?

Anpassen der Symbolfarbe der Navigationsleistenschaltfläche von Bootstrap 4

In Bootstrap 4 wird die Hamburger-Umschaltschaltfläche angezeigt, wenn die Bildschirmgröße unter 992 Pixel liegt. Um seine Farbe anzupassen, können Sie die Klasse „navbar-toggler-icon“ verwenden.

Navbar-Farbkontext:

Das Hamburger-Toggler-Symbol hat zwei Hintergrundbilder:

• Navbar-Licht: Weißes Symbol für Licht Hintergründe.
• Navbar-dark:Schwarzes Symbol für dunkle Hintergründe.

Ändern der Symbolfarbe:

Um die Standardfarbe zu überschreiben, können Sie das Symbol über CSS anpassen. Hier ist ein 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");
}

Dieses CSS setzt die Symbolfarbe auf Rosa. Beachten Sie das Strichattribut in den SVG-Daten, das die Symbolfarbe bestimmt.

Zusätzliches Styling:

Um den Rand des Symbols an die Symbolfarbe anzupassen, können Sie Folgendes hinzufügen folgender Stil:

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

Alternative Ansatz:

Alternativ können Sie Symbole aus externen Bibliotheken wie Font Awesome verwenden und diese unabhängig formatieren.

Aktualisiert für Bootstrap 4.0.0:

In Bootstrap 4.0.0 wurde „navbar-inverse“ zur Verwendung in „navbar-dark“ umbenannt Navigationsleisten mit dunklem Hintergrund.

Zusätzliche Anpassungsoptionen:

Ausführlichere Informationen zum Anpassen der Farben der Bootstrap 4-Navigationsleiste finden Sie in der offiziellen Dokumentation: https://getbootstrap .com/docs/4.0/components/navbar/#colors

Das obige ist der detaillierte Inhalt vonWie passe ich die Farbe des Bootstrap 4 Navbar-Hamburger-Menüsymbols an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!