Grupa gumba

Grupirajte niz gumba zajedno u jednom retku s grupom gumba i nadjačajte ih s JavaScriptom.

Osnovni primjer

Omotajte niz gumba .btns .btn-group. Dodajte neobavezni JavaScript radio i ponašanje u stilu okvira s našim dodatkom za gumbe .

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

Provjerite ispravnost `role`i dostavite oznaku

Kako bi pomoćne tehnologije (kao što su čitači zaslona) prenijele da je niz gumba grupiran, rolepotrebno je osigurati odgovarajući atribut. Za grupe gumba to bi bilo role="group", dok bi alatne trake trebale imati role="toolbar".

Osim toga, grupe i alatne trake trebale bi dobiti izričitu oznaku, jer ih većina pomoćnih tehnologija inače neće objaviti, unatoč prisutnosti ispravnog atributa uloge. U ovdje navedenim primjerima koristimo , ali mogu se koristiti aria-labeli alternative poput .aria-labelledby

Kombinirajte skupove grupa gumba u alatne trake gumba za složenije komponente. Upotrijebite uslužne klase prema potrebi za raspoređivanje grupa, gumba i više.

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

Slobodno pomiješajte grupe unosa s grupama gumba na alatnim trakama. Slično gornjem primjeru, vjerojatno će vam trebati neki uslužni programi za pravilno raspoređivanje stvari.

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

Dimenzioniranje

Umjesto primjene klasa veličine gumba na svaki gumb u grupi, samo dodajte svakom gumbu .btn-group-*, .btn-groupuključujući svaki kada ugniježdite više grupa.

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

Gniježđenje

Postavite .btn-groupunutar drugog .btn-groupkada želite padajuće izbornike pomiješane s nizom gumba.

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

Vertikalna varijacija

Neka skup gumba izgleda okomito, a ne vodoravno. Padajući izbornici gumba za dijeljenje ovdje nisu podržani.

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