Sasaklawin ng artikulong ito ang mga sumusunod na pananaw upang ipakita ang paggamit ng mga Bootstrap badge:
- Paano Gamitin ang Bootstrap Badge para sa Karagdagang Impormasyon?
- Paano Gamitin ang Bootstrap Badge para sa Kontekswal na Impormasyon?
- Paano Magdagdag ng Mga Custom na Estilo sa Bootstrap Badge?
- Paano Magdagdag ng Mga Icon sa Bootstrap Badge?
- Paano I-link ang Bootstrap Badge sa Ibang Pinagmulan?
- Paano Gawing Bilog ang mga Badge?
- Paano Gamitin ang Bootstrap Badge bilang Counter?
Ano ang Bootstrap Badges?
Ang mga badge ay ang mga pangunahing bahagi na ginagamit upang magpakita ng indicator. Halimbawa, maaaring gamitin ang mga ito bilang numeric counter upang ipakita ang bilang ng mga notification o mensahe:
Magagamit din ang mga ito upang magpakita ng karagdagang impormasyon, tulad ng ipinapakita sa ibinigay na larawan:
Paano Gamitin ang Bootstrap Badge para sa Karagdagang Impormasyon?
Maaaring idagdag ang mga badge ng Bootstrap sa loob ng mga elemento ng HTML upang magamit bilang karagdagang impormasyon. Tingnan ang halimbawang binanggit sa ibaba para sa demonstrasyon.
Halimbawa
Upang gamitin ang Bootstrap badge para sa karagdagang impormasyon, una:
- Idagdag ang ' 'at' ' mga elemento.
- Ilagay ang ' 'elemento na may ' badge 'at' badge-* ” mga klase. Ang klase ng 'badge-*' ay tumutukoy sa badge na may tinukoy na kulay:
< h6 > Mga scholarship < span klase = 'pangalawang badge badge' > Bago < / span >< / h6 >
Mapapansing dalawang badge ang idinaragdag sa mga nauugnay na heading:
Paano Gamitin ang Bootstrap Badge para sa Kontekswal na Impormasyon?
Ang mga bootstrap badge ay maaari ding gamitin upang magbigay ng impormasyon sa konteksto tulad ng ' badge-panganib ” ay ipinapakita ang badge sa pulang kulay at maaaring gamitin upang ipakita ang ilang mga nabigong mensahe tulad ng pagkansela, di-wasto, o higit pa. Ang ' badge-tagumpay Ang ” ay ginagamit kung saan gusto naming magpakita ng ilang mensahe ng tagumpay.
Halimbawa
Tingnan ang ibinigay na code upang maunawaan ang tinalakay na senaryo:
< span klase = 'badge badge-panganib' >Hindi na-verify ang account< / span >< span klase = 'impormasyon ng badge ng badge' >ito ang badge< / span >
< span klase = 'badge badge-warning' > Nakabinbin ang Account para sa pag-apruba< / span >
< span klase = 'badge badge-tagumpay' >Na-verify ang account< / span >
Output
Paano Magdagdag ng Mga Custom na Estilo sa Bootstrap Badge?
Maaari mo ring gamitin ang CSS upang magdagdag ng ilang natatanging estilo sa mga badge ng Bootstrap. Para sa isang mas mahusay na pag-unawa, isang klase na may pangalang ' kaugalian ' ay idinagdag sa loob ng ' ' elemento. Pagkatapos, ang mga sumusunod na katangian ay inilapat:
< span klase = 'badge badge-panganib custom' >Hindi na-verify ang account < / span >< span klase = 'pasadyang impormasyon sa badge ng badge' >Ito ang badge< / span >
< span klase = 'pasadyang babala ng badge ng badge' > Nakabinbin ang Account para sa pag-apruba< / span >
< span klase = 'pasadyang badge-tagumpay na badge' >Na-verify ang account< / span >
Istilo ang 'custom' na klase
.pasadya {laki ng font : 18px ;
bigat ng font : 100 ;
espasyo ng titik : 1px ;
padding : 8px 15px ;
}
Ang ' .pasadya ' ay ginagamit upang ma-access ang ' kaugalian ” klase. Ang mga sumusunod na katangian ay inilalapat dito:
- “ laki ng font ” inaayos ang laki ng font.
- “ bigat ng font ” sabi ng kapal ng font.
- “ espasyo ng titik ” nagdaragdag ng espasyo sa pagitan ng mga titik.
- “ padding ” ay nagbibigay ng espasyo sa paligid ng nilalaman ng elemento.
Output
Paano Magdagdag ng Mga Icon sa Bootstrap Badge?
Maaari din kaming magdagdag ng iba't ibang mga icon sa mga badge. Upang gawin ito, mayroong ilang mga klase na maaaring magamit para sa layuning ito. Para sa karagdagang impormasyon, bisitahin ang Galing ng Font website.
Halimbawa
Sa HTML, magdagdag ng “ ' elemento. Sa loob ng elementong ito, ilagay ang inline na elemento na “ ” o “” para ipasok ang icon class:
< span klase = 'badge badge-panganib custom' > Hindi na-verify ang account< i klase = 'malayong fa-times-circle' >< / i >
< / span >
< span klase = 'pasadyang badge-tagumpay na badge' > Na-verify ang account
< i klase = 'fas fa-user-check' >< / i >
< / span >
Output
Paano I-link ang Bootstrap Badge sa Ibang Pinagmulan?
Upang gawing naki-click ang mga badge ng Bootstrap, ilagay ang “ badge 'mga klase sa loob ng HTML' ” tag at ibigay ang sanggunian ng naka-link na pahina sa “ href ” attribute:
< a href = '#' klase = 'badge badge-panganib custom' >Kanselahin< / a >< a href = '#' klase = 'pasadyang impormasyon sa badge ng badge' >Isumite< / a >
Output
Paano Gawing Bilog ang mga Badge?
Upang gawing mas bilugan ang mga gilid ng badge, magdagdag ng klase ' badge-pill ”. Sinusuportahan ng klase na ito ang mas malaking “ hangganan-radius 'at pahalang' padding ' ari-arian:
< span klase = 'badge badge-pill badge-danger custom' >Hindi na-verify ang account < / span >< span klase = 'badge badge-pill badge-warning custom' > Nakabinbin ang Account para sa pag-apruba< / span >
< span klase = 'badge badge-pill badge-success custom' >Na-verify ang account < / span >
Output
Paano Gamitin ang Bootstrap Badge bilang Counter?
Para gumawa ng button na may counter, magdagdag ng HTML “ 'tag na may uri' pindutan 'at italaga dito ang mga klase ng button' btn 'at' btn-tagumpay ”. Pagkatapos, isama ang ' ” elemento para maglagay ng counter:
< pindutan uri = 'button' klase = 'btn btn-tagumpay' >Mga Notification < span klase = 'badge badge-light' > 4 < / span >
< / pindutan >
Output
Iyon ay tungkol sa mga badge ng Bootstrap at ang kanilang mga nauugnay na label sa Bootstrap.
Konklusyon
Ang Bootstrap ' badge Ang klase ay ginagamit upang magdagdag ng mga badge sa website. Halimbawa, ang mga klase tulad ng ' badge-panganib ”, “ impormasyon ng badge ”, at higit pa ang maaaring magamit upang magdagdag ng impormasyong ayon sa konteksto sa mga badge bilang kanilang label. Ang ilang mga klase ay inilapat upang magdagdag ng mga icon sa mga badge, gaya ng “ malayo fa-times-circle ” para maglagay ng cross-circle icon. Ang post na ito ay nagbigay ng komprehensibong gabay sa mga badge at label ng Bootstrap.