in English

Gruppu di buttone

Gruppu una seria di buttoni inseme nantu à una sola linea cù u gruppu di buttone, è super-powered elli cù JavaScript.

Esempiu basicu

Avvolgi una seria di buttoni cù .btnin .btn-group. Aghjunghjite nantu à a radiu JavaScript opzionale è u cumpurtamentu di stile di checkbox cù u nostru plugin di buttoni .

<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>
Assicurà curretta roleè furnisce una etichetta

Per esse tecnulugii assistivi (cum'è i lettori di schermu) per trasmette chì una seria di buttoni hè raggruppata, un roleattributu appropritatu deve esse furnitu. Per i gruppi di buttone, questu seria role="group", mentre chì i toolbars duveranu avè un role="toolbar".

Inoltre, i gruppi è i toolbars anu da esse datu una etichetta esplicita, cum'è a maiò parte di e tecnulugii d'assistenza ùn anu micca annunziatu, malgradu a presenza di l'attributu di rolu currettu. In l'esempii furniti quì, usemu aria-label, ma alternative cum'è aria-labelledbyponu ancu esse usate.

Barra di strumenti di buttone

Unisce gruppi di gruppi di buttone in barre di strumenti di buttone per cumpunenti più cumplessi. Aduprate classi di utilità cum'è necessariu per spazià i gruppi, i buttoni è più.

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

Sentite liberu di mischjà gruppi di input cù gruppi di buttone in i vostri toolbars. Simile à l'esempiu sopra, probabilmente avete bisognu di qualchì utilità per spazzà e cose bè.

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

Misure

Invece di applicà e classi di dimensionamentu di i buttoni à ogni buttone in un gruppu, aghjunghje solu .btn-group-*à ognunu .btn-group, cumpresu ognuna quandu nesting parechji 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

Mettite un .btn-groupin un altru .btn-groupquandu vulete menu dropdown mischiati cù una seria di buttone.

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

Variazione verticale

Fate chì un inseme di buttuni apparisce verticalmente in pila invece di orizontali. I menu dropdown di u buttone Split ùn sò micca supportati quì.

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