Bootstrap - Groupes de boutons

Les groupes de boutons permettent d'empiler plusieurs boutons sur une seule ligne. Ceci est utile lorsque vous souhaitez placer ensemble des éléments tels que des boutons d'alignement. Vous pouvez ajouter une radio JavaScript facultative et un comportement de style de case à cocher avec Bootstrap Button Plugin .

Le tableau suivant résume les classes importantes fournies par Bootstrap pour utiliser les groupes de boutons -

Classe	La description	Exemple de code
.btn-groupe	Cette classe est utilisée pour un groupe de boutons de base. Enveloppez une série de boutons avec classe.btn dans .btn-group.	`<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>`
barre d'outils .btn	Cela permet de combiner des ensembles de <div class = "btn-group"> dans une <div class = "btn-toolbar"> pour des composants plus complexes.	`<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>`
.btn-group-lg, .btn-group-sm, .btn-group-xs	Ces classes peuvent être appliquées à un groupe de boutons au lieu de redimensionner chaque bouton.	`<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>`
.btn-group-vertical	Cette classe fait apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement.	`<div class = "btn-group-vertical"> ... </div>`

Groupe de boutons de base

L'exemple suivant montre l'utilisation de la classe .btn-group discuté dans le tableau ci-dessus -

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

Barre d'outils des boutons

L'exemple suivant montre l'utilisation de la classe .btn-toolbar discuté dans le tableau ci-dessus -

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

Taille du bouton

L'exemple suivant montre l'utilisation de la classe .btn-group-* discuté dans le tableau ci-dessus -

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

Nesting

Vous pouvez imbriquer des groupes de boutons dans un autre groupe de boutons, c'est-à-dire placer un .btn-group dans un autre .btn-group . Ceci est fait lorsque vous voulez des menus déroulants mélangés avec une série de boutons.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

Buttongroup vertical

L'exemple suivant montre l'utilisation de la classe .btn-group-vertical discuté dans le tableau ci-dessus -

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>