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.
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č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.
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.
Želite veće ili manje dugmad? Dodati .btn-lg
ili .btn-sm
za dodatne veličine.
Kreirajte dugmad na nivou bloka—ona koja obuhvataju punu širinu roditelja—dodavanjem .btn-block
.
Dugmad će se pojaviti pritisnuti (s tamnijom pozadinom, tamnijim rubom i umetnutom sjenom) kada su aktivni. Nema potrebe za dodavanjem klase u <button>
s jer oni 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.
Neka gumbi izgledaju neaktivno dodavanjem disabled
logičkog atributa bilo kojem <button>
elementu.
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 izgledala kao da je ona vizuelno onemogućena.- 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.
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>
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>
.
Metoda | Opis |
---|---|
$().button('toggle') |
Uključuje push stanje. Daje dugmetu izgled da je aktivirano. |
$().button('dispose') |
Uništava dugme elementa. |