"Icon-bar" dans la barre de navigation de bootstrap de Twitter

96

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>

A quoi ça sert icon-bar? Pourquoi y a-t-il trois exemples similaires?

Ce code se trouve dans la section de la barre de navigation: 

<div class="navbar-header">
  ...
</div>
html css twitter-bootstrap JohanTG
la source
19
Il s'agit de créer un bouton avec trois lignes horizontales. Ce bouton s'affiche lorsque la largeur de l'écran est petite et que la barre de navigation se réduit. Lorsque vous cliquez dessus, la barre de navigation se développe.
Arpit Agrawal
1
@ArpitAgrawal, vous avez raison, mais pensez à en faire une réponse au lieu d'un commentaire!
MEMark

Réponses:

130

icon-barest utilisé pour les mises en page réactives pour créer un bouton qui ressemble à ≡ sur des écrans de navigateur étroits. Vous pouvez redimensionner la fenêtre de votre navigateur (en la rendant plus étroite) pour voir comment la barre de navigation est remplacée par ce bouton.

Les trois spanbalises créent trois lignes horizontales qui ressemblent à un bouton, communément appelé l'icône «hamburger».

Jetez un oeil à icon-baren 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-colorest configuré pour être gris80 . En fait, vous pouvez changer son width, height, background-color, etc. comme vous le souhaitez.

lvarayut
la source
Je n'étais pas sûr d'avoir compris ce que vous entendiez par minimisé car l'icône Je n'obtiens pas une 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 en effet en un bouton comportant trois lignes horizontales. Merci d'avoir éclairci ce mystère pour moi.
Bletch
3
@Bletch, comme vous l'avez probablement compris, il veut dire "minimisé" comme dans "rendre la fenêtre petite", pas l'habituel "réduire dans la barre d'état système".
MEMark
2
Vous savez ce qui est bizarre à ce sujet ... c'est que c'est .navbar-toggle .icon-bar. Au lieu de la laisser en tant que classe autonome, ils en ont fait une sous-classe de la bascule de la barre de navigation. Cela, pour moi, n'a aucun sens. Je veux pouvoir décorer mes propres boutons et menus déroulants avec ceci en dehors d'une barre de navigation. Vous pouvez simplement copier le bloc CSS entier et en faire une classe autonome pour accomplir cela, mais c'est du code répété. Cependant, je ne connais pas de meilleure solution.
Chris Cirefice
9
Je n'arrive pas à croire que les mots icône hamburger n'apparaissent pas sur cette page.
Jeremy Anderson
1
@JeremyAnderson C'est le cas maintenant, n'est-ce pas? : D
Priya Ranjan Singh
7

J'ai développé la réponse du PO puisque cela est apparu lors d'une recherche différente, et j'ai dû apporter quelques modifications pour que les choses fonctionnent qui, à mon avis, valaient la peine d'être partagées ici. Le mettre dans sa propre réponse afin qu'il obtienne un formatage de code approprié.

J'ai utilisé ceci dans un bouton bascule déroulant 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;
}
streetlogics
la source
3

le class="navbar-toggle"est utilisé pour obtenir les styles.

data-toggle="collapse" L'attribut est utilisé pour contrôler l'affichage et le masquage.

l' data-target = "#id"attribut est utilisé pour connecter le bouton avec le div réductible

icon-barest utilisé pour créer un bouton avec trois lignes horizontales. Ce bouton s'affiche lorsque la largeur de l'écran est petite

NAND
la source