Grupi i butonave

Gruponi një seri butonash së bashku në një rresht të vetëm ose vendosni ato në një kolonë vertikale.

Në këtë faqe

Shembull themelor

Mbështillni një seri butonash me .btnnë .btn-group.

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

Sigurohuni të saktë `role`dhe jepni një etiketë

Në mënyrë që teknologjitë ndihmëse (të tilla si lexuesit e ekranit) të përcjellin se një seri butonash është grupuar, roleduhet të sigurohet një atribut i përshtatshëm. Për grupet e butonave, kjo do të ishte role="group", ndërsa shiritat e veglave duhet të kenë një role="toolbar".

Për më tepër, grupeve dhe shiritave të veglave duhet t'u jepet një etiketë e qartë, pasi shumica e teknologjive ndihmëse përndryshe nuk do t'i shpallin ato, pavarësisht nga prania e atributit të saktë të rolit. Në shembujt e dhënë këtu, ne përdorim aria-label, por alternativa të tilla si aria-labelledbymund të përdoren gjithashtu.

Këto klasa gjithashtu mund të shtohen në grupe lidhjesh, si një alternativë ndaj .navkomponentëve të navigimit .

Lidhje aktive Lidhje Lidhje

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Stilet e përziera

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Stilet e përshkruara

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

Kutitë e kontrollit dhe grupet e butonave të radios

Kombinoni kutinë e kontrollit të ngjashëm me butonat dhe butonat e ndërrimit të radios në një grup butonash me pamje pa probleme.

Kutia e kontrollit 1 Kutia e kontrollit 2 Kutia e kontrollit 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Radio 1 Radio 2 Radio 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Kombinoni grupe të grupeve të butonave në shiritat e veglave të butonave për komponentë më kompleksë. Përdorni klasat e shërbimeve sipas nevojës për të ndarë grupet, butonat dhe më shumë.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-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-info">8</button>
  </div>
</div>

Mos ngurroni të përzieni grupet e hyrjes me grupet e butonave në shiritat e veglave tuaja. Ngjashëm me shembullin e mësipërm, ka të ngjarë që do t'ju nevojiten disa shërbime për t'i vendosur gjërat siç duhet.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Përmasat

Në vend që të aplikoni klasa për madhësinë e butonave për çdo buton në një grup, thjesht shtoni .btn-group-*në secilin .btn-group, duke përfshirë secilën kur futni grupe të shumta.

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

Folezimi

Vendosni një .btn-groupbrenda një tjetri .btn-groupkur dëshironi që menutë rënëse të përzihen me një seri butonash.

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

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Variacion vertikal

Bëni që një grup butonash të shfaqen vertikalisht dhe jo horizontalisht. Listat e butonave të ndarjes nuk mbështeten këtu.