Dokumentasyon at mga halimbawa para sa paggamit ng Bootstrap custom progress bar na nagtatampok ng suporta para sa mga stacked bar, animated na background, at text label.
Paano ito gumagana
Ang mga bahagi ng pag-unlad ay binuo gamit ang dalawang elemento ng HTML, ilang CSS upang itakda ang lapad, at ilang mga katangian. Hindi namin ginagamit ang HTML5 <progress>element , na tinitiyak na maaari mong i-stack ang mga progress bar, i-animate ang mga ito, at maglagay ng mga text label sa ibabaw ng mga ito.
Ginagamit namin ang .progressbilang isang wrapper upang isaad ang max na halaga ng progress bar.
Ginagamit namin ang panloob .progress-barupang ipahiwatig ang pag-unlad sa ngayon.
Nangangailangan .progress-barang isang inline na istilo, klase ng utility, o custom na CSS upang maitakda ang kanilang lapad.
Ang .progress-bardin ay nangangailangan ng ilan roleat mga ariakatangian upang gawin itong naa-access.
Pagsama-samahin iyan, at mayroon kang mga sumusunod na halimbawa.
Nagbibigay ang Bootstrap ng ilang mga utility para sa pagtatakda ng lapad . Depende sa iyong mga pangangailangan, maaaring makatulong ang mga ito sa mabilis na pag-configure ng progreso.
Mga label
Magdagdag ng mga label sa iyong progress bar sa pamamagitan ng paglalagay ng text sa loob ng .progress-bar.
25%
taas
Nagtatakda lang kami ng heightvalue sa .progress, kaya kung babaguhin mo ang value na iyon .progress-bar, awtomatikong magre-resize ang inner nang naaayon.
Mga background
Gumamit ng mga background utility class para baguhin ang hitsura ng mga indibidwal na progress bar.
Maramihang mga bar
Isama ang maramihang progress bar sa isang progress component kung kailangan mo.
may guhit
Idagdag .progress-bar-stripedsa alinman .progress-barupang maglapat ng stripe sa pamamagitan ng CSS gradient sa kulay ng background ng progress bar.
Mga animated na guhit
Ang striped gradient ay maaari ding gawing animated. Idagdag .progress-bar-animatedsa .progress-barupang i-animate ang mga guhit pakanan pakaliwa sa pamamagitan ng mga animation ng CSS3.