SourceInkqubela phambili
Amaxwebhu kunye nemizekelo yokusebenzisa iibar zenkqubela zeBootstrap zesiko ezinenkxaso yeebar ezipakishweyo, imvelaphi eshukumayo, kunye neelebhile zokubhaliweyo.
Ingaba isebenza kanjani
Amacandelo enkqubela phambili akhiwe ngezinto ezimbini ze-HTML, ezinye i-CSS ukuseta ububanzi, kunye neempawu ezimbalwa. Asisebenzisi i-HTML5 <progress>
element , siqinisekisa ukuba uyakwazi ukupakisha iibar zenkqubela-phambili, ziphile, kwaye ubeke iilebhile zokubhaliweyo phezu kwazo.
- Sisebenzisa
.progress
umgca wokusonga ukubonisa elona xabiso liphezulu lebar yenkqubela.
- Sisebenzisa ingaphakathi
.progress-bar
ukubonisa inkqubela ukuza kuthi ga ngoku.
- Ifuna isitayile
.progress-bar
esingaphakathi, iklasi eluncedo, okanye iCSS yesiko ukuseta ububanzi bazo.
- Ikwafuna
.progress-bar
ezinye role
kunye aria
neempawu ukwenza ukuba ifikeleleke.
Beka konke kunye, kwaye unayo le mizekelo ilandelayo.
I-Bootstrap ibonelela ngezinto eziluncedo zokuseta ububanzi . Ngokuxhomekeke kwiimfuno zakho, ezi zinokunceda ngokukhawuleza ukuqwalasela inkqubela.
Iileyibhile
Yongeza iilebhile kwiibar zakho zenkqubela ngokubeka okubhaliweyo ngaphakathi kwe .progress-bar
.
Ubude
Sibeka height
ixabiso kuphela kwi .progress
, ngoko ke ukuba utshintsha elo xabiso ingaphakathi .progress-bar
liza kwenza ubungakanani obukhulu ngokufanelekileyo.
Imvelaphi
Sebenzisa iiklasi eziluncedo ngasemva ukutshintsha inkangeleko yebar yenkqubela phambili.
Imivalo emininzi
Bandakanya imivalo yenkqubela phambili kwiqela lenkqubela ukuba ufuna.
Inemigca
Yongeza .progress-bar-striped
nakweyiphi na .progress-bar
ukufaka umgca nge CSS gradient ngaphezulu kombala ongasemva webar yenkqubela.
Imivumbo yoopopayi
Ithareyidi enemigca nayo inokudlalwa. Yongeza .progress-bar-animated
kwi .progress-bar
-anime kwimigca ekunene ukuya ekhohlo ngokusebenzisa oopopayi be-CSS3.