Ta članek vas bo poučil:
- Kako narediti gumbe v programu Bootstrap?
- Kako ustvariti orisne gumbe v programu Bootstrap?
- Kako prilagoditi velikosti gumbov Bootstrap?
- Kako narediti gumb na ravni bloka v programu Bootstrap?
- Kako ustvariti gumbe aktivnega stanja v programu Bootstrap?
- Kako ustvariti onemogočene državne gumbe v programu Bootstrap?
Kako narediti gumbe v programu Bootstrap?
Bootstrap ' btn ” razred se uporablja za ustvarjanje gumbov. Če želite dodati stilizirane gumbe, lahko uporabite » btn « z barvnim razredom, kot je » btn-uspeh ”, da ustvarite zeleni gumb.
V HTML je »
Za jasen koncept si oglejte spodnji primer.
Primer
V datoteki HTML sledite korakom za ustvarjanje gumbov z uporabo različnih oznak:
- Dodaj '
« in » 'elemente in jim dodeli' btn « in » btn-primarni ” razrede. - Nato dodajte »
” oznaka z vrsto “ gumb ”. Dodelite mu ' btn « in » btn-uspeh ” za oblikovanje prvih dveh gumbov kot modrega in tretjega kot zelenega:
< a razred = 'btn btn-primarni' href = '#' > Odprto < / a >
< vnos vrsta = 'gumb' razred = 'btn btn-uspeh' vrednost = 'Iskanje' >
Izhod
Kako ustvariti orisne gumbe v programu Bootstrap?
Če želite dodati obrise gumbov, Bootstrap ' btn-outline-* ” se uporablja razred. V svoji sintaksi ' * ” tukaj predstavlja barvo obrisa. Na primer, ' btn-oris-nevarnost ' postavi rdeč obris, ' btn-oris-primarni ” nastavi modri obris in še več.
Analizirajte spodnjo kodo:
< gumb vrsta = 'gumb' razred = 'btn btn-oris-primarni' >Naslednji< / gumb >< gumb vrsta = 'gumb' razred = 'btn btn-oris-nevarnost' >Prekliči< / gumb >
< gumb vrsta = 'gumb' razred = 'btn btn-outline-success' >Uspeh< / gumb >
Opaziti je mogoče, da je ' Naslednji ' ima moder obris, gumb ' Prekliči « z rdečim obrisom in » Uspeh Gumb ” je oblikovan z zelenim obrisom:
Kako prilagoditi velikosti gumbov Bootstrap?
Nekateri razredi Bootstrap se uporabljajo za prilagajanje velikosti gumbov, kot so:
- “ btn-lg ” je uporabljen za ustvarjanje velikega gumba. Ta razred lahko poveča velikost pisave in oblazinjenje.
- “ btn-md ” ustvari srednje velik gumb.
- “ btn-sm ” ustvari majhen gumb.
Primer
Zdaj bomo ustvarili tri gumbe z različnimi velikostmi in samoumevnimi imeni:
< gumb vrsta = 'gumb' razred = 'btn btn-sekundarni btn-lg' >Velika< / gumb >< gumb vrsta = 'gumb' razred = 'btn btn-opozorilo btn-md' >srednje< / gumb >
< gumb vrsta = 'gumb' razred = 'btn btn-nevarnost btn-sm' >Majhen< / gumb >
Izhod
Kako narediti gumb na ravni bloka v programu Bootstrap?
Gumbi na ravni bloka so tisti, ki imajo velikost polne širine. Če želite ustvariti gumbe na ravni bloka, uporabite » btn-blok ” se uporablja na naslednji način
< gumb vrsta = 'gumb' razred = 'btn btn-opozorilo btn-blok' > gumb< / gumb >< gumb vrsta = 'gumb' razred = 'btn btn-sekundarni btn-blok' >gumb< / gumb >
Izhod
Kako ustvariti gumbe aktivnega stanja v programu Bootstrap?
Gumbi aktivnega stanja se nanašajo na gumbe, ki so trenutno aktivni. Ti gumbi so nekoliko temnejši od običajnih. Za ustvarjanje takšnih gumbov bo Bootstrap aktivna ” je uporabljen razred.
Primer
Spodnja koda ustvari dva gumba. Prvi je v normalnem stanju, medtem ko je drugi uporabljen z ' aktivna ” razred:
< gumb vrsta = 'gumb' razred = 'btn btn-uspeh' >Uspeh< / gumb >< gumb vrsta = 'gumb' razred = 'btn btn-uspeh aktiven' >Uspeh< / gumb >
Izhod
Kako ustvariti onemogočene državne gumbe v programu Bootstrap?
Onemogočeni gumbi stanja se nanašajo na gumbe, ki jih ni mogoče klikniti in jih ni mogoče uporabiti. V programu Bootstrap je » onemogočeno ” se uporablja za ustvarjanje gumba onemogočenega stanja. ' onemogočeno V ta namen lahko uporabite tudi atribut.
Primer
Oglejte si spodnji primer:
- Prvi gumb ni v onemogočenem stanju.
- Drugi uporablja ' onemogočeno ” za ustvarjanje gumba onemogočenega stanja.
- Tretji uporablja ' onemogočeno ” atribut:
< gumb vrsta = 'gumb' razred = 'btn btn-uspeh onemogočen' >Uspeh< / gumb >
< gumb vrsta = 'gumb' razred = 'btn btn-uspeh' onemogočeno>Uspeh< / gumb >
Izhod
Zajeli smo različne vidike, povezane z gumbi Bootstrap in njihovim slogom v CSS.
Zaključek
' btn ” se uporablja za ustvarjanje gumbov Bootstrap s preprosto zasnovo. Če želite ustvariti barvne in orisane gumbe, uporabite » btn-* « in » btn-outline-* ' se uporabljajo razredi, kjer ' * ” simbolizira kateri koli barvni razred. Na primer, ' btn-opozorilo ' ustvari rumeni gumb, ' btn-oris-opozorilo ” ustvari rumeno obrobljen gumb in še veliko več. Če želite gumbe aktivirati ali onemogočiti, se uporabita razreda »aktivno« oziroma »onemogočeno«. Ta objava je zagotovila izčrpen vodnik o gumbih Bootstrap.