Ang artikulong ito ay magtuturo sa iyo:
- Paano Gumawa ng Mga Pindutan sa Bootstrap?
- Paano Gumawa ng Mga Outline Button sa Bootstrap?
- Paano Ayusin ang Mga Laki ng Button ng Bootstrap?
- Paano Gumawa ng Block-Level Button sa Bootstrap?
- Paano Gumawa ng Mga Aktibong Pindutan ng Estado sa Bootstrap?
- Paano Gumawa ng Mga Pindutan ng Disabled na Estado sa Bootstrap?
Paano Gumawa ng Mga Pindutan sa Bootstrap?
Ang Bootstrap ' btn 'Ang klase ay ginagamit upang lumikha ng mga pindutan. Upang magdagdag ng mga naka-istilong pindutan, maaari mong gamitin ang ' btn ” klase na may klase ng kulay, gaya ng “ btn-tagumpay ” para gumawa ng berdeng button.
Sa HTML, ang ' ”, “ ”, at “ 'tag na may uri' pindutan ” ay ginagamit upang lumikha ng mga pindutan. Ang ' btn ” class ay may paunang natukoy na estilo na nagdaragdag ng pangunahing estilo sa mga elemento ng button.
Para sa isang malinaw na konsepto, tingnan ang halimbawa sa ibaba.
Halimbawa
Sa HTML file, sundin ang mga hakbang para gumawa ng mga button gamit ang iba't ibang tag:
- Idagdag ang ' 'at' 'mga elemento at italaga ang mga ito' btn 'at' btn-pangunahin ” mga klase.
- Pagkatapos, magdagdag ng ' 'tag na may uri' pindutan ”. Italaga ito sa ' btn 'at' btn-tagumpay ” para sa pag-istilo bilang unang dalawang pindutan bilang asul, at ang pangatlo bilang berde:
< a klase = 'btn btn-pangunahin' href = '#' > Bukas < / a >
< input uri = 'button' klase = 'btn btn-tagumpay' halaga = 'Paghahanap' >
Output
Paano Gumawa ng Mga Outline Button sa Bootstrap?
Upang magdagdag ng mga balangkas ng button, ang Bootstrap “ btn-outline-* ” klase ang ginagamit. Sa syntax nito, ' * ” dito ay kumakatawan sa kulay ng balangkas. Halimbawa, ' btn-outline-panganib 'naglalagay ng pulang balangkas,' btn-outline-primary ” nagtatakda ng asul na balangkas, at higit pa.
Suriin ang code na ibinigay sa ibaba:
< pindutan uri = 'button' klase = 'btn btn-outline-primary' >Susunod< / pindutan >< pindutan uri = 'button' klase = 'btn btn-outline-danger' >Kanselahin< / pindutan >
< pindutan uri = 'button' klase = 'btn btn-outline-success' >Tagumpay< / pindutan >
Mapapansin na ang ' Susunod may asul na outline ang button, ang ' Kanselahin 'button na may pulang balangkas, at ang ' Tagumpay Ang button na ” ay naka-istilo na may berdeng outline:
Paano Ayusin ang Mga Laki ng Button ng Bootstrap?
Ang ilang mga klase ng Bootstrap ay inilapat upang ayusin ang mga laki ng button, gaya ng:
- “ btn-lg ” class ay inilapat upang lumikha ng isang malaking button. Maaaring pataasin ng klase na ito ang laki ng font at padding.
- “ btn-md ” ay lumilikha ng isang katamtamang laki na pindutan.
- “ btn-sm ” lumilikha ng isang maliit na button.
Halimbawa
Ngayon, gagawa kami ng tatlong mga button na may iba't ibang laki at mga pangalan na nagpapaliwanag sa sarili:
< pindutan uri = 'button' klase = 'btn btn-pangalawang btn-lg' >Malaki< / pindutan >< pindutan uri = 'button' klase = 'btn btn-babala btn-md' >katamtaman< / pindutan >
< pindutan uri = 'button' klase = 'btn btn-danger btn-sm' >Maliit< / pindutan >
Output
Paano Gumawa ng Block-Level Button sa Bootstrap?
Ang mga block-level na pindutan ay ang mga may hawak ng buong lapad na laki. Upang lumikha ng mga block-level na pindutan, ang ' btn-block ” klase ay ginagamit tulad ng sumusunod
< pindutan uri = 'button' klase = 'btn btn-babala btn-block' > pindutan< / pindutan >< pindutan uri = 'button' klase = 'btn btn-pangalawang btn-block' >button< / pindutan >
Output
Paano Gumawa ng Mga Aktibong Pindutan ng Estado sa Bootstrap?
Ang mga pindutan ng aktibong estado ay tumutukoy sa mga pindutan na kasalukuyang aktibo. Ang mga pindutan na ito ay bahagyang mas madilim kaysa sa normal. Upang lumikha ng gayong mga pindutan, ang Bootstrap ' aktibo ” ang klase ay ginagamit.
Halimbawa
Ang code sa ibaba ay lumilikha ng dalawang mga pindutan. Ang una ay nasa normal na estado habang ang isa ay inilapat sa ' aktibo 'klase:
< pindutan uri = 'button' klase = 'btn btn-success' >Tagumpay< / pindutan >< pindutan uri = 'button' klase = 'btn btn-success active' >Tagumpay< / pindutan >
Output
Paano Gumawa ng Mga Pindutan ng Disabled na Estado sa Bootstrap?
Ang mga naka-disable na button ng estado ay tumutukoy sa mga button na hindi naki-click at hindi nagagamit. Sa Bootstrap, ang ' may kapansanan Ang klase ay ginagamit upang lumikha ng isang hindi pinagana na pindutan ng estado. Ang ' may kapansanan ” attribute ay maaari ding gamitin para sa layuning ito.
Halimbawa
Tingnan ang halimbawang ibinigay sa ibaba:
- Ang unang button ay wala sa isang disabled na estado.
- Ang pangalawa ay gumagamit ng ' may kapansanan ” class para gumawa ng disabled state button.
- Ang pangatlo ay gumagamit ng ' may kapansanan ” attribute:
< pindutan uri = 'button' klase = 'btn btn-success disabled' >Tagumpay< / pindutan >
< pindutan uri = 'button' klase = 'btn btn-success' hindi pinagana>Tagumpay< / pindutan >
Output
Sinaklaw namin ang iba't ibang aspeto na nauugnay sa mga pindutan ng Bootstrap at ang kanilang estilo sa CSS.
Konklusyon
Ang ' btn Ang klase ay ginagamit upang lumikha ng mga pindutan ng Bootstrap na may simpleng disenyo. Upang lumikha ng mga button na may kulay at outline, ang ' btn-* 'at' btn-outline-* 'Ang mga klase ay ginagamit kung saan ang ' * ” ay sumisimbolo sa anumang klase ng kulay. Halimbawa, ' btn-babala 'lumilikha ng dilaw na buton,' btn-outline-warning ” ay lumilikha ng dilaw na nakabalangkas na button, at marami pa. Upang gawing aktibo o hindi pinagana ang mga button, inilalapat ang mga klase na 'aktibo' at 'hindi pinagana', ayon sa pagkakabanggit. Ang post na ito ay nagbigay ng komprehensibong gabay sa mga pindutan ng Bootstrap.