Gruppo di pulsanti

Raggruppa una serie di pulsanti su un'unica riga con il gruppo di pulsanti e potenziali con JavaScript.

Esempio di base

Avvolgi una serie di pulsanti con .btnin .btn-group. Aggiungi la radio JavaScript opzionale e il comportamento dello stile delle caselle di controllo con il nostro plugin per pulsanti .

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

Garantire corretto `role`e fornire un'etichetta

Affinché le tecnologie assistive (come le utilità per la lettura dello schermo) indichino che una serie di pulsanti è raggruppata, è rolenecessario fornire un attributo appropriato. Per i gruppi di pulsanti, questo sarebbe role="group", mentre le barre degli strumenti dovrebbero avere un role="toolbar".

Inoltre, ai gruppi e alle barre degli strumenti dovrebbe essere assegnata un'etichetta esplicita, poiché la maggior parte delle tecnologie assistive non li annuncerà, nonostante la presenza dell'attributo role corretto. Negli esempi forniti qui, utilizziamo , ma possono essere utilizzate anche aria-labelalternative come .aria-labelledby

Combina insiemi di gruppi di pulsanti nelle barre degli strumenti dei pulsanti per componenti più complessi. Usa le classi di utilità secondo necessità per distanziare gruppi, pulsanti e altro.

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

Sentiti libero di mescolare i gruppi di input con i gruppi di pulsanti nelle barre degli strumenti. Simile all'esempio sopra, probabilmente avrai bisogno di alcune utilità per distanziare le cose correttamente.

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

Dimensionamento

Invece di applicare classi di ridimensionamento dei pulsanti a ogni pulsante in un gruppo, aggiungi semplicemente .btn-group-*a ciascuno .btn-group, incluso ciascuno quando si annidano più gruppi.

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

Nidificazione

Metti uno .btn-groupdentro un altro .btn-groupquando vuoi che i menu a tendina siano mescolati con una serie di pulsanti.

<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 id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Variazione verticale

Fai in modo che una serie di pulsanti appaia impilati verticalmente anziché orizzontalmente. I menu a discesa dei pulsanti di divisione non sono supportati qui.

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