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.
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>
Prenošenje značenja pomoćnim tehnologijama
Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .sr-only
klasom.
Klase .btn
su 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čije prikazivanje).
Kada koristite klase dugmadi na <a>
elementima koji se koriste za aktiviranje funkcionalnosti unutar stranice (kao što je sažimanje sadržaja), umjesto povezivanja na nove stranice ili odjeljke unutar trenutne stranice, ovim vezama treba dati adekvatan naziv role="button"
da na odgovarajući način 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">
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>
Želite veće ili manje dugmad? Dodati .btn-lg
ili .btn-sm
za 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>
Dugmad će se pojaviti pritisnuta (s tamnijom pozadinom, tamnijim rubom i umetnutom sjenom) kada su aktivna. 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>
Neka gumbi izgledaju neaktivno dodavanjem disabled
logič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žavajudisabled
atribut, tako da morate dodati.disabled
klasu da bi se ona vizualno činila onemogućenom.- Neki stilovi prilagođeni budućnosti su uključeni kako biste onemogućili sve
pointer-events
tipke za sidrenje. U pretraživačima koji podržavaju to svojstvo, uopće nećete vidjeti onemogućeni kursor. - Onemogućena dugmad bi trebala uključivati
aria-disabled="true"
atribut koji ukazuje na stanje elementa pomoćnim tehnologijama.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Upozorenje o funkcionalnosti veze
Klasa .disabled
koristi pointer-events: none
da pokuša da onemogući funkcionalnost veze <a>
s, ali to CSS svojstvo još nije standardizovano. Osim toga, čak i u pretraživačima koji podržavaju pointer-events: none
navigacija 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. Da biste bili sigurni, dodajte tabindex="-1"
atribut na ove veze (kako biste spriječili da primaju fokus tastature) i koristite prilagođeni JavaScript da onemogućite njihovu funkcionalnost.
Uradite više sa dugmadima. Kontrolirajte stanja dugmadi ili kreirajte grupe dugmadi za više komponenti kao što su trake sa alatkama.
Dodajte data-toggle="button"
da biste promijenili stanje gumba active
. Ako unaprijed uključujete dugme, morate ručno dodati .active
klasu i .aria-pressed="true"
<button>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
Bootstrap-ovi .button
stilovi 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-group
koji sadrži te modificirane dugmad kako biste omogućili njihovo ponašanje pri prebacivanju putem JavaScripta i dodajte .btn-group-toggle
stil <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 click
događaja na gumbu. Ako koristite neki drugi metod za ažuriranje unosa – npr. sa <input type="reset">
ili ručnom primjenom checked
svojstva unosa – morat ćete ručno .active
uključiti <label>
.
Imajte na umu da prethodno označena dugmad zahtijevaju od vas da ručno dodate .active
klasu u input <label>
.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> 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" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Metoda | Opis |
---|---|
$().button('toggle') |
Uključuje push stanje. Daje dugmetu izgled da je aktivirano. |
$().button('dispose') |
Uništava dugme elementa. |