Grup de botons

Agrupeu una sèrie de botons en una sola línia amb el grup de botons i supereu-los amb JavaScript.

Exemple bàsic

Emboliqui una sèrie de botons amb .btnen .btn-group. Afegiu una ràdio de JavaScript opcional i un comportament d'estil de casella de selecció amb el nostre connector de botons .

<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>

Assegureu-vos que sigui correcte `role`i proporcioneu una etiqueta

Perquè les tecnologies d'assistència (com ara lectors de pantalla) transmetin que s'agrupen una sèrie de botons, rolecal proporcionar un atribut adequat. Per als grups de botons, això seria role="group", mentre que les barres d'eines haurien de tenir un role="toolbar".

A més, els grups i les barres d'eines haurien de tenir una etiqueta explícita, ja que la majoria de les tecnologies d'assistència no els anunciaran, malgrat la presència de l'atribut de rol correcte. En els exemples proporcionats aquí, fem servir , però també es poden utilitzar aria-labelalternatives com ara .aria-labelledby

Combineu conjunts de grups de botons en barres d'eines de botons per a components més complexos. Utilitzeu les classes d'utilitat segons sigui necessari per espaiar grups, botons i més.

<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>

No dubteu a barrejar grups d'entrada amb grups de botons a les vostres barres d'eines. De manera similar a l'exemple anterior, és probable que necessiteu algunes utilitats per espaiar les coses correctament.

<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>

Talla

En lloc d'aplicar classes de mida de botons a tots els botons d'un grup, només cal que afegiu -los .btn-group-*a cadascun .btn-group, inclòs cada un quan anideu diversos grups.

<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>

Nidificació

Col·loqueu un .btn-groupdins d'un altre .btn-groupquan vulgueu que els menús desplegables es barregin amb una sèrie de botons.

<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>

Variació vertical

Feu que un conjunt de botons apareguin apilats verticalment en lloc de horitzontal. Els menús desplegables de botons dividits no s'admeten aquí.

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