“Icon-bar” dans la barre de navigation de twitter bootstrap

icon-bar est utilisée pour les mises en page réactives afin de créer un bouton qui ressemble à screens 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 balises span créent trois lignes horizontales qui ressemblent à un bouton, communément appelé l’icône “burger”.

Jetez un coup d’oeil à la 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. La background-color est définie sur gray80 . En fait, vous pouvez changer sa width , sa height , sa background-color , etc. comme vous le souhaitez.

J’ai élargi la réponse de l’OP puisque celle-ci est apparue lors d’une recherche différente, et j’ai dû apporter quelques modifications pour vraiment faire fonctionner les choses qui, selon moi, valaient la peine d’être partagées ici. Le mettre dans sa propre réponse pour qu’il soit correctement formaté.

Je l’ai utilisé dans un bouton déroulant au lieu de la barre de navigation (même idée). Voici le code que j’ai utilisé:

HTML:

  
  Menu       
 
Reservations
 
Amenities
 
Accommodations
 
Location
 
Packages
 
  

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" atsortingbut est utilisé pour contrôler le show et le masquer.

l’atsortingbut data-target = "#id" est utilisé pour connecter le bouton avec le div escamotable

icon-bar est utilisée pour créer un bouton avec trois lignes horizontales. Ce bouton est affiché lorsque la largeur de l’écran est petite