Grup de butoane

Grupați o serie de butoane împreună pe o singură linie cu grupul de butoane și supraalimentați-le cu JavaScript.

Exemplu de bază

Înfășurați o serie de nasturi cu .btnîn .btn-group. Adăugați un comportament radio opțional JavaScript și stil de casetă de selectare cu pluginul nostru pentru butoane .

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

Asigurați-vă că este corect `role`și furnizați o etichetă

Pentru ca tehnologiile de asistență (cum ar fi cititoarele de ecran) să transmită faptul că o serie de butoane este grupată, roletrebuie furnizat un atribut adecvat. Pentru grupurile de butoane, aceasta ar fi role="group", în timp ce barele de instrumente ar trebui să aibă un role="toolbar".

În plus, grupurile și barele de instrumente ar trebui să primească o etichetă explicită, deoarece majoritatea tehnologiilor de asistență nu le vor anunța altfel, în ciuda prezenței atributului de rol corect. În exemplele oferite aici, folosim aria-label, dar aria-labelledbypot fi folosite și alternative, cum ar fi.

Combinați seturi de grupuri de butoane în bare de instrumente pentru butoane pentru componente mai complexe. Utilizați clase de utilitate după cum este necesar pentru a îndepărta grupurile, butoanele și multe altele.

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

Simțiți-vă liber să amestecați grupurile de introducere cu grupuri de butoane în barele de instrumente. Similar cu exemplul de mai sus, probabil că veți avea nevoie de unele utilități, totuși pentru a spațiul corect lucrurile.

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

Dimensiunea

În loc să aplicați clase de dimensionare a butoanelor fiecărui buton dintr-un grup, doar adăugați .btn-group-*la fiecare .btn-group, inclusiv fiecare atunci când imbricați mai multe grupuri.

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

Cuibărire

Plasați un .btn-groupîn altul .btn-groupatunci când doriți meniuri drop-down amestecate cu o serie de butoane.

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

Variație verticală

Faceți ca un set de butoane să apară stivuite pe verticală și nu pe orizontală. Mențiunile drop-down cu butoanele divizate nu sunt acceptate aici.

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