in English

Grupa dugmadi

Grupirajte niz dugmadi zajedno u jednu liniju sa grupom dugmadi i super-pojačajte ih pomoću JavaScript-a.

Osnovni primjer

Zamotajte niz dugmadi .btnu .btn-group. Dodajte opcioni JavaScript radio i ponašanje u stilu checkbox-a pomoću našeg dodatka za dugmad .

<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>
Uvjerite se da je ispravno rolei dajte naljepnicu

Da bi pomoćne tehnologije (kao što su čitači ekrana) prenijele da je niz dugmadi grupiran, rolepotrebno je osigurati odgovarajući atribut. Za grupe dugmadi, ovo bi bilo role="group", dok bi trake sa alatkama trebale imati role="toolbar".

Osim toga, grupama i alatnim trakama treba dati eksplicitnu oznaku, jer ih većina pomoćnih tehnologija inače neće najaviti, uprkos prisutnosti ispravnog atributa uloge. U ovdje navedenim primjerima koristimo , ali se mogu koristiti aria-labeli alternative kao što su.aria-labelledby

Traka sa dugmadima

Kombinirajte skupove grupa dugmadi u trake sa dugmadima za složenije komponente. Koristite uslužne klase po potrebi da razmaknete grupe, dugmad i još mnogo toga.

<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 za unos sa grupama dugmadi na vašim alatnim trakama. Slično kao u gornjem primjeru, vjerovatno će vam trebati neki uslužni programi da biste pravilno rasporedili 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>

Određivanje veličine

Umjesto da primjenjujete klase veličine gumba na svako dugme u grupi, samo dodajte .btn-group-*svakom .btn-group, uključ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>

Nesting

Postavite a .btn-groupunutar drugog .btn-groupkada želite padajuće menije pomešane sa nizom dugmadi.

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

Vertikalna varijacija

Neka skup dugmadi izgleda vertikalno naslagano, a ne horizontalno. Padajući meni dugmeta za razdvajanje ovde nije podržan.

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