Mpuntuo
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ɛ wobɛtumi aboaboa nkɔsoɔ bars ano, ayɛ anigyeɛ, na wode nsɛm nkyerɛwdeɛ ahyɛ so.
- Yɛde no di dwuma
.progress
sɛ wrapper de kyerɛ max value a ɛwɔ nkɔso bar no mu. - Yɛde emu
.progress-bar
nsɛm no kyerɛ nkɔso a aba de besi nnɛ. - The
.progress-bar
hwehwɛ inline style, utility class, anaa custom CSS de ahyɛ wɔn trɛw. - The
.progress-bar
nso hwehwɛ binomrole
nearia
su ahorow na ama ayɛ nea wotumi nya.
Fa ɛno nyinaa bom, na woanya nhwɛso ahorow a edidi so yi.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
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.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
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
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Tenten
Yɛde height
botae bi si .progress
, enti sɛ wo sesa saa botae no a, emu .progress-bar
no bɛsesa ne kɛse sɛnea ɛfata.
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Nsɛm a Ɛwɔ Akyi Nsɛm
Fa akyi mfaso adesua ahorow sesa ankorankoro nkɔso nkyerɛwde ahorow no hwɛbea.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Nnua ahorow pii
Fa nkɔsoɔ nsɛm pii ka nkɔsoɔ fã bi ho sɛ ɛhia a.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Ntrɛwmu
Fa ka .progress-bar-striped
biara .progress-bar
ho na fa stripe bi di dwuma denam CSS gradient so wɔ nkɔso bar no akyi kɔla no so.
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Ntrɛwmu a wɔde mfonini ayɛ
Wobetumi nso ayɛ animation wɔ striped gradient no mu. Fa ka .progress-bar-animated
ho na .progress-bar
ama nsensanee no ayɛ adwuma wɔ nifa so akɔ benkum so denam CSS3 mfonini ahorow so.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>