"icon-bar" dans la barre de navigation twitter bootstrap
Je ne peux pas comprendre ce que le code suivant signifie 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>
À quoi sert icon-bar? Pourquoi y a-t-il trois exemples similaires?
Ce code se trouve dans la section barre de navigation:
<div class="navbar-header">
...
</div>
3 réponses
icon-bar est utilisé pour les mises en page sensibles pour créer un bouton qui ressemble à ≡ sur les é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é par ce bouton.
Les trois balises span créent trois lignes horizontales qui ressemblent à un bouton, communément appelé l'icône "burger".
Prendre un coup d'oeil à icon-bar dans bootstrap.css:
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
C'est une structure de bloc, donc elle est alignée ligne par ligne. Le background-color est défini sur gray80. En fait, vous pouvez modifier son width, height, background-color, etc. Comme tu veux.
J'ai développé la réponse de L'OP depuis que cela est apparu lors d'une recherche différente, et j'ai dû faire quelques modifications pour faire fonctionner des choses que je sentais mériter d'être partagées ici. Le mettre dans sa propre réponse afin qu'il obtienne un formatage de code approprié.
Je l'ai utilisé dans un bouton à bascule déroulant au lieu de navbar (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 class="navbar-toggle" est utilisé pour obtenir les styles.
data-toggle="collapse" attribut est utilisé pour contrôler le spectacle et masquer.
L'attribut data-target = "#id" est utilisé pour connecter le bouton avec le div pliable
icon-bar est utilisé o créer un bouton avec trois lignes horizontales. Ce bouton s'affiche lorsque la largeur de l'écran est petit