Groupe de boutons

Regroupez une série de boutons sur une seule ligne avec le groupe de boutons et super-alimentez-les avec JavaScript.

Exemple de base

Enveloppez une série de boutons avec .btnin .btn-group. Ajoutez une radio JavaScript facultative et un comportement de style de case à cocher avec notre plugin de boutons .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Assurez-vous d'être correct `role`et fournissez une étiquette

Pour que les technologies d'assistance (telles que les lecteurs d'écran) indiquent qu'une série de boutons est regroupée, un roleattribut approprié doit être fourni. Pour les groupes de boutons, ce serait role="group", tandis que les barres d'outils devraient avoir un role="toolbar".

De plus, les groupes et les barres d'outils doivent recevoir une étiquette explicite, car la plupart des technologies d'assistance ne les annonceront pas autrement, malgré la présence de l'attribut de rôle correct. Dans les exemples fournis ici, nous utilisons aria-label, mais des alternatives telles que aria-labelledbypeuvent également être utilisées.

Combinez des ensembles de groupes de boutons dans des barres d'outils de boutons pour des composants plus complexes. Utilisez les classes utilitaires selon vos besoins pour espacer les groupes, les boutons, etc.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

N'hésitez pas à mélanger des groupes d'entrée avec des groupes de boutons dans vos barres d'outils. Semblable à l'exemple ci-dessus, vous aurez probablement besoin de certains utilitaires pour espacer correctement les choses.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Dimensionnement

Au lieu d'appliquer des classes de dimensionnement de bouton à chaque bouton d'un groupe, il suffit d'ajouter .btn-group-*à chacun .btn-group, y compris chacun lors de l'imbrication de plusieurs groupes.

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

Nidification

Placez un .btn-groupdans un autre .btn-grouplorsque vous souhaitez mélanger des menus déroulants avec une série de boutons.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Variation verticale

Faire apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement. Les listes déroulantes des boutons partagés ne sont pas prises en charge ici.

<div class="btn-group-vertical">
  ...
</div>