Bootstrap Groupe de boutons

Les groupes de boutons permettent d'empiler plusieurs boutons sur la même ligne. Lorsque vous voulez aligner des boutons ensemble, c'est très utile. Vous pouvezPlugin de boutons BootstrapAjoute un comportement facultatif de style boutons radio et cases à cocher en JavaScript.

Le tableau suivant résume quelques classes importantes fournies par Bootstrap pour l'utilisation des groupes de boutons :

ClasseDescriptionExemple de code
.btn-groupCette classe est utilisée pour former un groupe de boutons de base. Dans.btn-group, placez une série de boutons avec la classe.btnboutons. 
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbarCette classe permet de combiner plusieurs groupes <div class="btn-group"> dans un <div class="btn-toolbar">, généralement pour obtenir 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-xsCes classes peuvent être appliquées à la taille de l'ensemble du groupe de boutons, sans avoir besoin d'ajuster la taille de 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-verticalCette classe fait qu'un groupe de boutons s'affiche empilé verticalement au lieu d'être empilé horizontalement. 
<div class="btn-group-vertical">
  ...
</div>

Groupe de boutons de base

L'exemple ci-dessous illustre l'utilisation de la classe abordée dans le tableau ci-dessus.btn-group:

Exemple

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

Essayez-le »

Le résultat est affiché ci-dessous :

基本的按钮组

Barre d'outils de boutons

L'exemple ci-dessous illustre la classe présentée dans le tableau ci-dessus.btn-toolbarl'utilisation de :

Exemple

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

Essayez-le »

Le résultat est affiché ci-dessous :

按钮工具栏

Taille des boutons

L'exemple ci-dessous illustre la classe abordée dans le tableau ci-dessus.btn-group-*l'utilisation de :

Exemple

<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">Bouton 1</button> <button type="button" class="btn btn-default">Bouton 2</button> <button type="button" class="btn btn-default">Bouton 3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">Bouton 4</button> <button type="button" class="btn btn-default">Bouton 5</button> <button type="button" class="btn btn-default">Bouton 6</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">Bouton 7</button> <button type="button" class="btn btn-default">Bouton 8</button> <button type="button" class="btn btn-default">Bouton 9</button> </div>

Essayez-le »

Le résultat est affiché ci-dessous :

按钮组的大小

Imbrication

Vous pouvez imbriquer un autre groupe de boutons dans un groupe de boutons, c'est-à-dire, dans un.btn-groupimbriquer un autre dans.btn-group . Ceci est utilisé lorsque vous souhaitez combiner un menu déroulant avec une série de boutons.

Exemple

<div class="btn-group"> <button type="button" class="btn btn-default">Bouton 1</button> <button type="button" class="btn btn-default">Bouton 2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Menu déroulant<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Lien du menu déroulant 1</a></li> <li><a href="#">Lien déroulant 2</a></li> </ul> </div> </div>

Essayez-le »

Le résultat est affiché ci-dessous :

嵌套的按钮组

Groupe de boutons vertical

L'exemple ci-dessous montre la classe présentée dans le tableau ci-dessus.btn-group-verticall'utilisation de :

Exemple

<div class="btn-group-vertical"> <button type="button" class="btn btn-default">Bouton 1</button> <button type="button" class="btn btn-default">Bouton 2</button> <div class="btn-group-vertical"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Menu déroulant<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Lien du menu déroulant 1</a></li> <li><a href="#">Lien déroulant 2</a></li> </ul> </div> </div>

Essayez-le »

Le résultat est affiché ci-dessous :

垂直的按钮组
Autres extensions