Ovaj članak će vas uputiti:
- Kako napraviti gumbe u Bootstrapu?
- Kako stvoriti okvirne gumbe u Bootstrapu?
- Kako prilagoditi veličinu gumba Bootstrap?
- Kako napraviti gumb na razini bloka u Bootstrapu?
- Kako stvoriti gumbe aktivnog stanja u Bootstrapu?
- Kako stvoriti onemogućene gumbe stanja u Bootstrapu?
Kako napraviti gumbe u Bootstrapu?
Bootstrap ' btn ” klasa se koristi za stvaranje gumba. Da biste dodali stilizirane gumbe, možete koristiti ' btn ” s klasom boje, kao što je „ btn-uspjeh ” za stvaranje zelenog gumba.
U HTML-u, '
Za jasan koncept pogledajte primjer u nastavku.
Primjer
U HTML datoteci slijedite korake za stvaranje gumba pomoću različitih oznaka:
- Dodati '
' i ' ' elemente i dodijelite im ' btn ' i ' btn-primarni ” razreda. - Zatim dodajte '
” oznaka s tipom “ dugme ”. Dodijelite mu ' btn ' i ' btn-uspjeh ” za stiliziranje kao prva dva gumba kao plava, a treći kao zeleni:
< a razreda = 'btn btn-primarni' href = '#' > Otvorena < / a >
< ulazni tip = 'dugme' razreda = 'btn btn-uspjeh' vrijednost = 'Traži' >
Izlaz
Kako stvoriti okvirne gumbe u Bootstrapu?
Za dodavanje obrisa gumba, Bootstrap ' btn-outline-* ” koristi se klasa. U svojoj sintaksi,' * ” ovdje predstavlja boju obrisa. Na primjer, ' btn-skica-opasnost ” stavlja crveni obris, “ btn-skica-primarni ” postavlja plavi obris i više.
Analizirajte kod dat u nastavku:
< dugme tip = 'dugme' razreda = 'btn btn-outline-primary' >Dalje< / dugme >< dugme tip = 'dugme' razreda = 'btn btn-outline-danger' >Odustani< / dugme >
< dugme tip = 'dugme' razreda = 'btn btn-outline-success' >Uspjeh< / dugme >
Može se uočiti da je „ Sljedeći ' ima plavi obris, ' Otkazati ' s crvenim obrisom i ' Uspjeh ” gumb je stiliziran zelenim obrisom:
Kako prilagoditi veličinu gumba Bootstrap?
Neke Bootstrap klase primjenjuju se za podešavanje veličina gumba, kao što su:
- “ btn-lg ” klasa se primjenjuje za stvaranje velikog gumba. Ova klasa može povećati veličinu fonta i ispunu.
- “ btn-md ” stvara gumb srednje veličine.
- “ btn-sm ” stvara mali gumb.
Primjer
Sada ćemo izraditi tri gumba s različitim veličinama i razumljivim nazivima:
< dugme tip = 'dugme' razreda = 'btn btn-sekundarni btn-lg' >Veliki< / dugme >< dugme tip = 'dugme' razreda = 'btn btn-upozorenje btn-md' >srednje< / dugme >
< dugme tip = 'dugme' razreda = 'btn btn-opasnost btn-sm' >Mala< / dugme >
Izlaz
Kako napraviti gumb na razini bloka u Bootstrapu?
Gumbi na razini bloka su oni koji drže veličinu pune širine. Za stvaranje gumba na razini bloka, ' btn-blok ” klasa se koristi na sljedeći način
< dugme tip = 'dugme' razreda = 'btn btn-upozorenje btn-blok' > gumb< / dugme >< dugme tip = 'dugme' razreda = 'btn btn-sekundarni btn-blok' >gumb< / dugme >
Izlaz
Kako stvoriti gumbe aktivnog stanja u Bootstrapu?
Gumbi aktivnog stanja odnose se na gumbe koji su trenutno aktivni. Ovi gumbi su malo tamniji od normalnih. Za stvaranje takvih gumba, Bootstrap ' aktivan ” klasa se koristi.
Primjer
Donji kod stvara dva gumba. Prvi je u normalnom stanju, dok je drugi primijenjen s ' aktivan ” klasa:
< dugme tip = 'dugme' razreda = 'btn btn-uspjeh' >Uspjeh< / dugme >< dugme tip = 'dugme' razreda = 'btn btn-uspjeh aktivan' >Uspjeh< / dugme >
Izlaz
Kako stvoriti onemogućene gumbe stanja u Bootstrapu?
Onemogućeni gumbi stanja odnose se na gumbe na koje se ne može kliknuti i koji se ne mogu koristiti. U Bootstrapu, ' onemogućeno ” klasa se koristi za stvaranje gumba za onemogućeno stanje. ' onemogućeno ” atribut se također može koristiti za ovu svrhu.
Primjer
Pogledajte primjer u nastavku:
- Prvi gumb nije u onemogućenom stanju.
- Drugi koristi ' onemogućeno ” za stvaranje gumba za onemogućeno stanje.
- Treći koristi ' onemogućeno ” atribut:
< dugme tip = 'dugme' razreda = 'btn btn-uspjeh onemogućen' >Uspjeh< / dugme >
< dugme tip = 'dugme' razreda = 'btn btn-uspjeh' onemogućeno>Uspjeh< / dugme >
Izlaz
Pokrili smo različite aspekte vezane uz gumbe Bootstrap i njihov stil u CSS-u.
Zaključak
' btn ” klasa se koristi za stvaranje Bootstrap gumba s jednostavnim dizajnom. Za stvaranje gumba u boji i obrisa, ' btn-* ' i ' btn-outline-* ' klase se koriste tamo gdje ' * ” simbolizira bilo koju klasu boja. Na primjer, ' btn-upozorenje ” stvara žuti gumb, “ btn-skica-upozorenje ” stvara gumb s žutim okvirom i još mnogo toga. Kako bi gumbi bili aktivni ili onemogućeni, primjenjuju se klase 'aktivno' i 'onemogućeno'. Ovaj post pruža opsežan vodič o Bootstrap gumbima.