Dugmad

Koristite Bootstrap-ove prilagođene stilove gumba za radnje u obrascima, dijalozima i još mnogo toga uz podršku za više veličina, stanja i još mnogo toga.

Primjeri

Bootstrap uključuje nekoliko unaprijed definiranih stilova gumba, od kojih svaki služi svojoj semantičkoj svrsi, s nekoliko dodataka za veću kontrolu.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Onemogući prelamanje teksta

Ako ne želite da se tekst dugmeta preklopi, možete dodati .text-nowrapklasu dugmetu. U Sass-u možete postaviti $btn-white-space: nowrapda onemogućite prelamanje teksta za svako dugme.

Oznake dugmadi

Klase .btnsu dizajnirane da se koriste sa <button>elementom. Međutim, možete koristiti i ove klase na elementima <a>ili <input>(iako neki pretraživači mogu primijeniti malo drugačiji prikaz).

Kada koristite klase dugmadi na <a>elementima koji se koriste za pokretanje funkcionalnosti unutar stranice (kao što je sažimanje sadržaja), umjesto povezivanja na nove stranice ili odjeljke unutar trenutne stranice, ovim vezama treba dati role="button"adekvatnu funkciju da prenesu svoju svrhu pomoćnim tehnologijama kao što su čitači ekrana.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Dugmad obrisa

Trebate dugme, ali ne i bogate boje pozadine koje donose? Zamijenite zadane klase modifikatora .btn-outline-*onima za uklanjanje svih pozadinskih slika i boja na bilo kojem gumbu.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Veličine

Želite veće ili manje dugmad? Dodati .btn-lgili .btn-smza dodatne veličine.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Kreirajte dugmad na nivou bloka—ona koja obuhvataju punu širinu roditelja—dodavanjem .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Aktivno stanje

Tasteri će se pojaviti pritisnuti kada su aktivni s tamnijom pozadinom, tamnijim rubom i, kada su sjene omogućene, umetnutom sjenom. Nema potrebe za dodavanjem klase u <button>s jer koriste pseudo-klasu . Međutim, i dalje možete forsirati isti aktivni izgled sa .active(i uključiti aria-pressed=“true”atribut) ako trebate programski replicirati stanje.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Disabled state

Učinite da dugmad izgledaju neaktivno dodavanjem disabledlogičkog atributa bilo kojem <button>elementu.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Onemogućeni gumbi koji koriste <a>element ponašaju se malo drugačije:

• <a>s ne podržavaju disabledatribut, tako da morate dodati .disabledklasu da bi izgledala kao da je ona vizuelno onemogućena.
• Neki stilovi prilagođeni budućnosti su uključeni kako biste onemogućili sve pointer-eventstipke za sidrenje. U pretraživačima koji podržavaju to svojstvo, uopće nećete vidjeti onemogućeni kursor.
• Onemogućeni gumbi koji koriste <a>trebaju uključivati aria-disabled="true"​​atribut koji označava stanje elementa pomoćnim tehnologijama.
• Onemogućeni gumbi koji koriste <a> ne bi trebali uključivati href​​atribut.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Upozorenje o funkcionalnosti veze

Da pokrije slučajeve u kojima morate zadržati hrefatribut na onemogućenoj vezi, .disabledklasa koristi pointer-events: noneda pokuša onemogućiti funkcionalnost veze <a>s. Imajte na umu da ovo CSS svojstvo još nije standardizovano za HTML, ali ga podržavaju svi moderni pretraživači. Osim toga, čak i u pretraživačima koji podržavaju pointer-events: nonenavigacija pomoću tastature ostaje nepromijenjena, što znači da će korisnici tastature koji vide i korisnici pomoćnih tehnologija i dalje moći aktivirati ove veze. Dakle, da biste bili sigurni, pored aria-disabled="true", uključite i tabindex="-1"atribut na ove veze kako biste spriječili da primaju fokus tastature i koristite prilagođeni JavaScript da biste potpuno onemogućili njihovu funkcionalnost.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Dodatak za dugme

Uradite više sa dugmadima. Kontrolirajte stanja dugmadi ili kreirajte grupe dugmadi za više komponenti kao što su trake sa alatkama.

Uključi države

Dodajte data-toggle="button"da biste promijenili stanje gumba active. Ako unaprijed uključujete dugme, morate ručno dodati .activeklasu i .aria-pressed="true"<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Polje za potvrdu i radio dugmad

Bootstrap-ovi .buttonstilovi se mogu primijeniti na druge elemente, kao što je <label>s, kako bi se omogućilo prebacivanje u okvir za potvrdu ili dugme za radio stil. Dodajte data-toggle="buttons"u a .btn-groupkoji sadrži te modificirane dugmad kako biste omogućili njihovo ponašanje pri prebacivanju putem JavaScripta i dodajte .btn-group-togglestil <input>s unutar vaših dugmadi. Imajte na umu da možete kreirati pojedinačna dugmad sa napajanjem ili grupe njih.

Provjereno stanje ovih dugmadi se ažurira samo putem clickdogađaja na gumbu. Ako koristite neki drugi metod za ažuriranje unosa – npr. sa <input type="reset">ili ručnom primjenom checkedsvojstva unosa – morat ćete ručno .activeuključiti <label>.

Imajte na umu da prethodno označena dugmad zahtijevaju od vas da ručno dodate .activeklasu u input <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Metode