Groupe de boutons Bootstrap

Dans ce tutoriel, je vous propose de découvrir le composant groupe de boutons de Bootstrap (button group en anglais) pemettant de regrouper des boutons.

Exemple basique

Envelopper la classe .btn dans un groupe de bouton avec la classe .btn-group.

    
<div class="btn-group" role="group" aria-label="...">

     <button type="button" class="btn btn-default">Gauche</button>

     <button type="button" class="btn btn-default">Milieu</button>

     <button type="button" class="btn btn-default">Droite</button>

</div>

Exemple

Barre d'outils

Pour créer des éléments plus complexes, on pourra utiliser la classe .btn-toolbar.

L’attribut aria-label est utilisé pour définir une chaîne qui labélise l’élément courant. Utilisez-le lorsque le texte d’un label n’est pas visible à l’écran. Si il existe le texte du label de l’élément est visible, utilisez plutôt l’attribut aria-labelledby.

Cet attribut peut être utilisé avec n’importe quel élément HTML typique, il n’est pas limité aux éléments auxquels a été assigné un rôle ARIA.

      
<div class="btn-toolbar" role="toolbar" aria-label="groupe_boutons">

    <div class="btn-group" role="group" aria-label="bouton1">

          <button type="button" class="btn btn-default">Gauche</button>

            <button type="button" class="btn btn-default">Milieu</button>

          <button type="button" class="btn btn-default">Droite</button>

    </div>

    <div class="btn-group" role="group" aria-label="bouton2">

          <button type="button" class="btn btn-primary">Gauche</button>

          <button type="button" class="btn btn-primary">Milieu</button>

          <button type="button" class="btn btn-primary">Droite</button>

    </div>

</div>

Exemple

Taille

Pour gérer la taille, il suffit d'utiliser les classes .btn-group-*.

Nous en avons 3 :

.btn-group-lg
.btn-group-sm
.btn-group-xs

<div class="btn-group btn-group-lg" role="group" aria-label="...">
...
<div>

<div class="btn-group btn-group-sm" role="group" aria-label="...">
...
<div>

<div class="btn-group btn-group-xs" role="group" aria-label="...">
...
<div>

Exemple

Imbrication

Pour obtenir un menu déroulant, il faut placer la classe .btn-group dans une classe .btn-group.

    
<div class="btn-toolbar" role="toolbar" aria-label="groupe_boutons1">

    <div class="btn-group" role="group" aria-label="bouton1">

          <button type="button" class="btn btn-default">Gauche</button>

          <button type="button" class="btn btn-default">Milieu</button>

          <div class="btn-group" role="group">

                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false">

                    Menu déroulant

                    <span class="caret"></span>

                </button>

                  <ul class="dropdown-menu">

                        <li><a href="#" title="Lien 1">lien 1</a></li>

                        <li><a href="#" title="Lien 2">lien 2<s/a></li>

                  </ul>
 
          </div>

    </div>

</div>

Exemple

Vertical

Avec la classe .btn-group-vertical, vous pourrez placer les menus à la verticale.

    
<div class="btn-group-vertical" role="group" aria-label="...">

...

</div>

Exemple

Justifié

Avec la classe .btn-group-justified, vous pourrez justifier les menus.

Internet Explorer 8 n'interpréte pas les bordures sur les groupes de boutons justifiés. Pour contourner le probléme, il suffit d'envelopper le bouton avec une classe .btn-group.

En savoir +

Exemple avec la balise a

Si la balise a est utilisée comme bouton, il faudra rajouter role="button".

    
<div class="btn-group btn-group-justified" role="group" aria-label="...">

      <a href="#" class="btn btn-default" title="Gauche" role="button">Gauche</a>

      <a href="#" class="btn btn-default" title="Milieu" role="button">Milieu</a>

      <a href="#" class="btn btn-default" title="Droite" role="button">Droite</a>

</div>

Gauche Milieu Droite

Exemple avec la balise button

Dans ce cas, pour utiliser des groupes de boutons justifiés avec la balise button, il faudra envelopper chacun de ces éléments avec un <div class="btn-group" role="group"> et le fermer avec </div>.

    
<div class="btn-group btn-group-justified" role="group" aria-label="...">

    <div class="btn-group" role="group">

        <button type="button" class="btn btn-default">Gauche</button>

    </div>

    <div class="btn-group" role="group">

        <button type="button" class="btn btn-default">Milieu</button>

    </div>

    <div class="btn-group" role="group">

        <button type="button" class="btn btn-default">Droite</button>

    </div>

</div>

Tutoriel Bootstrap