Dokumentasi lan conto kanggo nggunakake garis kemajuan adat Bootstrap sing nampilake dhukungan kanggo bar sing ditumpuk, latar mburi animasi, lan label teks.
Cara kerjane
Komponen kemajuan dibangun nganggo rong unsur HTML, sawetara CSS kanggo nyetel jembar, lan sawetara atribut. Kita ora nggunakake unsur HTML5<progress> , mesthekake sampeyan bisa numpuk progress bar, animate wong, lan sijine label teks ing ndhuwur.
Kita nggunakake .progressminangka pambungkus kanggo nunjukaké Nilai max saka garis kemajuan.
Kita nggunakake batin .progress-barkanggo nuduhake kemajuan nganti saiki.
.progress-barMbutuhake gaya inline, kelas sarana, utawa CSS khusus kanggo nyetel ambane .
Uga .progress-barmbutuhake sawetara rolelan ariaatribut supaya bisa diakses.
Sijine kabeh, lan sampeyan duwe conto ing ngisor iki.
Bootstrap nyedhiyakake sawetara utilitas kanggo nyetel ambane . Gumantung saka kabutuhan sampeyan, iki bisa mbantu kanthi cepet ngatur proses.
Label
Tambah label menyang bar kemajuan kanthi nyelehake teks ing .progress-bar.
25%
dhuwur
Kita mung nyetel heightnilai ing .progress, dadi yen sampeyan ngganti nilai kasebut, batin .progress-barbakal kanthi otomatis ngowahi ukurane.
Latar mburi
Gunakake kelas sarana latar mburi kanggo ngganti tampilan garis kemajuan individu.
Multiple bar
Kalebu pirang-pirang bar kemajuan ing komponen kemajuan yen perlu.
belang
Tambah .progress-bar-stripedmenyang sembarang .progress-barkanggo aplikasi belang liwat CSS gradien liwat werna latar mburi garis kemajuan.
Strip animasi
Gradien belang uga bisa dianimasikan. Tambah .progress-bar-animatedkanggo .progress-baranimasi loreng tengen ngiwa liwat animasi CSS3.