Comment puis-je changer la couleur de l'icône de bascule de la barre de navigation Bootstrap 4 ?

Modification de la couleur de l'icône du bouton de la barre de navigation Bootstrap 4

L'icône de bascule de la barre de navigation de Bootstrap 4, représentée par l'icône hamburger, utilise une image d'arrière-plan SVG . Il existe deux variantes de l'image de l'icône : une pour les arrière-plans clairs et une autre pour les arrière-plans sombres.

Pour spécifier la couleur du basculeur, vous pouvez utiliser les classes suivantes :

• barre de navigation -dark : affiche une bascule clair/blanc sur plus sombre backgrounds.
• navbar-light : affiche une bascule sombre/gris sur des arrière-plans plus clairs.

Cependant, si vous souhaitez personnaliser davantage la couleur de la bascule, vous peut créer une icône personnalisée. Par exemple, l'extrait de code ci-dessous définit la couleur du basculeur sur rose (255, 102, 203) en utilisant la valeur Stroke='rgba(255,102,203, 0.5)' dans les données SVG :

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

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

Pour une démonstration en direct, reportez-vous à http://www.codeply.com/go/4FdZGlPMNV.

Vous pouvez également utiliser des icônes provenant de bibliothèques externes telles que Font Awesome.

À partir de Bootstrap 4 Beta, le navbar-inverse a été remplacée par navbar-dark pour les barres de navigation plus sombres arrière-plans, ce qui donne des liens plus clairs et des couleurs de 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!