Je ne comprends pas ce que signifie le code suivant en termes de icon-bar :
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>Qu'est-ce que icon-bar pour ? Pourquoi y a-t-il trois instances similaires ?
Ce code se trouve dans la section de la barre de navigation :
<div class="navbar-header">
...
</div>icon-bar est utilisé pour les mises en page réactives afin de créer un bouton qui se présente comme sur des écrans de navigateur étroits. Vous pouvez redimensionner la fenêtre de votre navigateur (en la rendant étroite) pour voir comment la barre de navigation est remplacée par ce bouton.
Les trois span Les balises créent trois lignes horizontales qui ressemblent à un bouton, communément appelé l'icône "burger".
Jetez un coup d'œil à icon-bar en bootstrap.css :
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}Il s'agit d'une structure en bloc, qui est donc alignée ligne par ligne. Le site background-color est fixé à gris80 . En fait, vous pouvez modifier son width , height , background-color etc. comme vous le souhaitez.
Je n'étais pas sûr d'avoir compris ce que vous vouliez dire par "réduit", car je n'obtiens pas d'icône différente si la fenêtre est réduite. Mais si vous réduisez la partie visible de la fenêtre du navigateur, le menu de navigation se transforme effectivement en un bouton comportant trois lignes horizontales. Merci d'avoir éclairci ce mystère pour moi.
@Bletch, comme vous l'avez probablement compris, il veut dire "minimisé" comme dans "rendre la fenêtre petite", et non pas comme dans "minimiser dans la barre d'état système".
Tu sais ce qui est bizarre avec ça... c'est que c'est .navbar-toggle .icon-bar . Au lieu d'en faire une classe autonome, ils en ont fait une sous-classe de la bascule de la barre de navigation. Pour moi, cela n'a aucun sens. Je veux pouvoir décorer mes propres boutons et menus déroulants avec ces éléments en dehors d'une barre de navigation. Il suffit de copier l'ensemble du bloc CSS et d'en faire une classe autonome pour y parvenir, mais cela revient à répéter le code. Je ne connais pas de meilleure solution, cependant.
J'ai développé la réponse de l'OP puisque cette question est apparue au cours d'une autre recherche, et j'ai dû faire quelques modifications pour que les choses fonctionnent, et j'ai pensé que cela valait la peine d'être partagé ici. Je l'ai mis dans sa propre réponse pour que le code soit correctement formaté.
Je l'ai utilisé dans un bouton de basculement de liste déroulante au lieu de la barre de navigation (même idée). Voici le code que j'ai utilisé :
HTML :
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Menu
<span class="icon-bars-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="reservations">Reservations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="amenities">Amenities</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="accommodations">Accommodations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="location">Location</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="packages">Packages</a></li>
</ul>
</div>CSS :
.dropdown-toggle .icon-bars-button{
display: inline-block;
vertical-align:middle;
}
.dropdown-toggle .icon-bar {
margin-bottom:2px;
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
Le site class="navbar-toggle" est utilisé pour obtenir les styles.
data-toggle="collapse" est utilisé pour contrôler l'affichage et le masquage.
le site data-target = "#id" est utilisé pour relier le bouton au div pliable.
icon-bar est utilisé pour créer un bouton avec trois lignes horizontales. Ce bouton est affiché lorsque la largeur de l'écran est faible.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
19 votes
Il s'agit de créer un bouton avec trois lignes horizontales. Ce bouton s'affiche lorsque la largeur de l'écran est faible et que la barre de navigation s'effondre. Lorsque vous cliquez dessus, la barre de navigation s'agrandit.
1 votes
@ArpitAgrawal, vous avez raison, mais pensez à en faire une réponse plutôt qu'un commentaire !