Nwoma ne nhwɛsoɔ a wɔde bedi dwuma wɔ Bootstrap custom progress bars a ɛkyerɛ mmoa ma stacked bars, animated backgrounds, ne text labels.
Sɛnea ɛyɛ adwuma
Wɔde HTML nneɛma abien na ɛkyekye nkɔso afã horow, CSS binom de hyehyɛ ntrɛwmu, ne su kakraa bi. Yɛmfa HTML5 <progress>element no nni dwuma , hwɛ hu sɛ wubetumi aboaboa nkɔso bar ahorow ano, ayɛ wɔn anigye, na wode nsɛm nkyerɛwde ahyɛ so.
Yɛde no di dwuma .progresssɛ wrapper de kyerɛ max value a ɛwɔ progress bar no mu.
Yɛde emu .progress-barnsɛm no kyerɛ nkɔso a aba de besi nnɛ.
The .progress-barhwehwɛ inline style, utility class, anaa custom CSS de ahyɛ wɔn trɛw.
The .progress-barnso hwehwɛ bi rolene ariasu ahorow na ama ayɛ nea wotumi nya.
Fa ɛno nyinaa bom, na woanya nhwɛso ahorow a edidi so yi.
Bootstrap ma nsa kakraa bi a wɔde bedi dwuma de ahyɛ ntrɛwmu . Eyinom betumi agyina w’ahiade so aboa ma woasiesie nkɔso ntɛmntɛm.
Nneɛma a wɔde kyerɛw nsɛm
Fa nkyerɛwde ahorow ka wo nkɔso bar ahorow no ho denam nsɛm a wode bɛto .progress-bar.
25% na ɛwɔ hɔ.
Tenten
Yɛde heightbotae bi si .progress, enti sɛ wosakra saa botae no a, emu .progress-barno bɛsesa ne kɛse sɛnea ɛfata.
Nsɛm a Ɛwɔ Akyi Nsɛm
Fa akyi mfaso adesua ahorow di dwuma fa sesa ankorankoro nkɔso nkyerɛwde ahorow no hwɛbea.
Nnua ahorow pii
Fa nkɔsoɔ nsɛm pii ka nkɔsoɔ fã bi ho sɛ ɛhia a.
Ntrɛwmu
Fa ka .progress-bar-stripedbiara .progress-barho na fa stripe bi di dwuma denam CSS gradient so wɔ nkɔso bar no akyi kɔla no so.
Ntrɛwmu a wɔde mfonini ayɛ
Wobetumi nso ayɛ animation wɔ striped gradient no mu. Fa ka .progress-bar-animatedho na .progress-barama nsensanee no ayɛ adwuma wɔ nifa so akɔ benkum so denam CSS3 mfonini ahorow so.