Sommaire

Une barre de groupe de boutons COMPOSANTS POUR LES BOUTONS:Groupe de boutons

Bootstrap vous permet de grouper des boutons. Cela va permettre d’afficher ensemble des boutons ayant des liens entre eux.

La barre est placée dans une boîte <div> avec la classe .btn-toolbar. Les groupes de boutons sont placés dans une boîte <div> avec la classe .btn-group.

Voici le code HTML à utiliser :

<div class="btn-toolbar"> 
   <div class="btn-group"> 
      <button type="button" class="btn btn-default">Introduction</button>
      <button type="button" class="btn btn-default">Résultats</button>
      <button type="button" class="btn btn-default">Conclusion</button>
   </div> 
   <div class="btn-group"> 
      <button type="button" class="btn btn-default">Tableaux</button>
      <button type="button" class="btn btn-default">Figures</button>
   </div> 
</div>

Voici l’affichage :

images/C11-003.png

Voici les sélecteurs utilisant .btn-toolbar :

.btn-toolbar::before, .btn-toolbar::after { 
   display: table; 
   content: " "; 
} 
.btn-toolbar::after { 
   clear: both; 
}

Voici les sélecteurs utilisant .btn-group :

.btn-toolbar>.btn+.btn, .btn-toolbar>.btn-group+.btn, ...