Comment puis-je changer la couleur du bouton bascule de la barre de navigation Bootstrap 4 ?

Personnalisation de la couleur du bouton bascule de la barre de navigation Bootstrap 4

Contexte :

Dans les sites Web Bootstrap, plus petits les écrans comportent généralement un bouton de menu hamburger pour la navigation. Ce bouton, par défaut, a une couleur particulière.

Question :

Pouvez-vous modifier la couleur du bouton bascule de la barre de navigation Bootstrap 4 ?

Réponse :

Utilisation du prédéfini de Bootstrap Styles :

Bootstrap 4 utilise des images d'arrière-plan SVG pour l'icône bascule. Il existe des classes spécifiques pour différents styles :

• .navbar-dark : icône de couleur claire sur fond sombre
• .navbar-light : icône de couleur sombre sur fond clair

Personnalisation de l'icône :

Si ces options prédéfinies ne conviennent pas selon vos besoins, vous pouvez créer une icône SVG personnalisée avec les couleurs souhaitées. Par exemple :

.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");
}

Ce code définit la couleur de l'icône sur rose. Vous pouvez ajuster les valeurs dans la fonction rgba() pour qu'elles correspondent à votre couleur préférée.

Utilisation de bibliothèques d'icônes externes :

Vous pouvez également utiliser des icônes de bibliothèques telles que Font Génial, assurez-vous d'appliquer les classes CSS nécessaires pour les styliser.

Mises à jour dans Bootstrap 4.0.0 :

Auparavant connue sous le nom de navbar-inverse, la classe de barre de navigation au thème sombre est désormais navbar-dark, qui produit des couleurs plus claires pour les liens et le bouton bascule.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!