Source

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

Alatna traka gumba

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>