Šis raksts sniegs jums norādījumus:
- Kā izveidot pogas Bootstrap?
- Kā izveidot kontūras pogas programmā Bootstrap?
- Kā pielāgot Bootstrap pogu izmērus?
- Kā izveidot bloka līmeņa pogu Bootstrap?
- Kā izveidot aktīvā stāvokļa pogas programmā Bootstrap?
- Kā Bootstrap izveidot atspējotas valsts pogas?
Kā izveidot pogas Bootstrap?
Bootstrap ' btn ” klase tiek izmantota, lai izveidotu pogas. Lai pievienotu stila pogas, varat izmantot “ btn ” klase ar krāsu klasi, piemēram, “ btn-veiksmi ”, lai izveidotu zaļu pogu.
HTML valodā “
Lai iegūtu skaidru koncepciju, skatiet tālāk redzamo piemēru.
Piemērs
HTML failā veiciet tālāk norādītās darbības, lai izveidotu pogas, izmantojot dažādus tagus.
- Pievienot '
' un ' 'elementi un piešķiriet tiem' btn ' un ' btn-primary ' klases. - Pēc tam pievienojiet '
' atzīme ar veidu ' pogu ”. Piešķiriet tai ' btn ' un ' btn-veiksmi ”, lai pirmās divas pogas būtu zilas, bet trešās – zaļas:
< a klasē = 'btn btn-primary' href = '#' > Atvērt < / a >
< ievade veids = 'poga' klasē = 'btn btn-success' vērtību = 'Meklēt' >
Izvade
Kā izveidot kontūras pogas programmā Bootstrap?
Lai pievienotu pogu kontūras, Bootstrap ' btn-outline-* ” tiek izmantota klase. Savā sintaksē ' * ” šeit apzīmē kontūras krāsu. Piemēram, ' btn-outline-bīstamība ' novieto sarkano kontūru, ' btn-outline-primary ” nosaka zilo kontūru un daudz ko citu.
Analizējiet tālāk norādīto kodu:
< pogu veids = 'poga' klasē = 'btn btn-outline-primary' >Nākamais< / pogu >< pogu veids = 'poga' klasē = 'btn btn-outline-danger' >Atcelt< / pogu >
< pogu veids = 'poga' klasē = 'btn btn-outline-success' > Veiksmi< / pogu >
Var novērot, ka ' Nākamais ' pogai ir zila kontūra, Atcelt ' poga ar sarkanu kontūru un ' Panākumi ” poga ir veidota ar zaļu kontūru:
Kā pielāgot Bootstrap pogu izmērus?
Dažas Bootstrap klases tiek izmantotas, lai pielāgotu pogu izmērus, piemēram:
- ' btn-lg ” klase tiek lietota, lai izveidotu lielu pogu. Šī klase var palielināt fonta lielumu un polsterējumu.
- ' btn-md ” izveido vidēja izmēra pogu.
- ' btn-sm ” izveido nelielu pogu.
Piemērs
Tagad mēs izveidosim trīs pogas ar dažādiem izmēriem un pašsaprotamiem nosaukumiem:
< pogu veids = 'poga' klasē = 'btn btn-sekundārais btn-lg' >Liels< / pogu >< pogu veids = 'poga' klasē = 'btn btn-warning btn-md' >vidējs< / pogu >
< pogu veids = 'poga' klasē = 'btn btn-danger btn-sm' >Mazais< / pogu >
Izvade
Kā izveidot bloka līmeņa pogu Bootstrap?
Bloka līmeņa pogas ir tās, kas satur pilna platuma izmēru. Lai izveidotu bloka līmeņa pogas, “ btn bloks ” klase tiek izmantota šādi
< pogu veids = 'poga' klasē = 'btn btn-warning btn-block' > poga< / pogu >< pogu veids = 'poga' klasē = 'btn btn-sekundārais btn-bloks' >poga< / pogu >
Izvade
Kā izveidot aktīvā stāvokļa pogas programmā Bootstrap?
Aktīvā stāvokļa pogas attiecas uz pogām, kas pašlaik ir aktīvas. Šīs pogas ir nedaudz tumšākas nekā parasti. Lai izveidotu šādas pogas, Bootstrap ' aktīvs ” klase tiek izmantota.
Piemērs
Tālāk norādītais kods izveido divas pogas. Pirmais ir normālā stāvoklī, bet otrs tiek lietots ar ' aktīvs ” klase:
< pogu veids = 'poga' klasē = 'btn btn-success' > Veiksmi< / pogu >< pogu veids = 'poga' klasē = 'btn btn-success active' > Veiksmi< / pogu >
Izvade
Kā Bootstrap izveidot atspējotas valsts pogas?
Atspējotās stāvokļa pogas attiecas uz pogām, uz kurām nevar noklikšķināt un kuras nav iespējams izmantot. Programmā Bootstrap “ invalīds ” klase tiek izmantota, lai izveidotu atspējota stāvokļa pogu. ' invalīds ” atribūtu var izmantot arī šim nolūkam.
Piemērs
Apskatiet tālāk sniegto piemēru:
- Pirmā poga nav atspējota.
- Otrajā izmanto ' invalīds ” klase, lai izveidotu atspējota stāvokļa pogu.
- Trešais izmanto ' invalīds ” atribūts:
< pogu veids = 'poga' klasē = 'btn btn-success atspējots' > Veiksmi< / pogu >
< pogu veids = 'poga' klasē = 'btn btn-success' atspējots>Veiksmīgi< / pogu >
Izvade
Mēs esam apskatījuši dažādus aspektus, kas saistīti ar Bootstrap pogām un to stilu CSS.
Secinājums
' btn ” klase tiek izmantota, lai izveidotu Bootstrap pogas ar vienkāršu dizainu. Lai izveidotu krāsainas un kontūru pogas, “ btn-* ' un ' btn-outline-* ” klases tiek izmantotas, ja “ * ” simbolizē jebkuru krāsu klasi. Piemēram, ' btn-brīdinājums ' izveido dzeltenu pogu, ' btn-outline-warning ” izveido dzeltenu kontūru pogu un daudz ko citu. Lai pogas būtu aktīvas vai atspējotas, tiek piemērotas attiecīgi “aktīvas” un “atspējotas” klases. Šajā ziņojumā tika sniegts visaptverošs ceļvedis par Bootstrap pogām.