Holomua
ʻO ka palapala a me nā laʻana no ka hoʻohana ʻana i nā pahu holomua maʻamau Bootstrap e hōʻike ana i ke kākoʻo no nā pahu i hoʻopaʻa ʻia, nā ʻano animated, a me nā lepili kikokikona.
Kūkulu ʻia nā ʻāpana holomua me ʻelua mau mea HTML, kekahi CSS e hoʻonohonoho i ka laulā, a me kekahi mau ʻano. ʻAʻole mākou e hoʻohana i ka HTML5 <progress>
element , e hōʻoia ana e hiki iā ʻoe ke hoʻopaʻa i nā pae holomua, hoʻolalelale iā lākou, a kau i nā lepili kikokikona ma luna o lākou.
- Hoʻohana mākou i ka
.progress
mea e ʻōwili ai e hōʻike i ka waiwai nui o ka pae holomua. - Hoʻohana mākou i ka loko
.progress-bar
e hōʻike i ka holomua i kēia manawa. - Pono
.progress-bar
ke ʻano inline, papa pono, a i ʻole CSS maʻamau e hoʻonohonoho i ko lākou laulā. - Pono
.progress-bar
pū kekahirole
a mearia
nā ʻano e hiki ai ke loaʻa.
E hoʻohui i nā mea a pau, a loaʻa iā ʻoe kēia mau hiʻohiʻona.
<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>
Hāʻawi ʻo Bootstrap i kahi lima o nā pono hana no ka hoʻonohonoho ʻana i ka laulā . Ma muli o kāu mau pono, kōkua paha kēia i ka hoʻonohonoho wikiwiki ʻana i ka holomua.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Hoʻohui i nā lepili i kāu mau pae holomua ma ke kau ʻana i nā kikokikona i loko o ka .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>
Hoʻonoho wale mākou i kahi height
waiwai ma ka .progress
, no laila inā hoʻololi ʻoe i kēlā waiwai .progress-bar
e hoʻololi ʻokoʻa ka mea i loko.
<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>
E hoʻohana i nā papa hana hope e hoʻololi i ke ʻano o nā pae holomua.
<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>
E hoʻokomo i nā pahu holomua he nui i kahi ʻāpana holomua inā pono ʻoe.
<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>
Hoʻohui .progress-bar-striped
i kekahi .progress-bar
e hoʻopili i kahi kāʻei ma o CSS gradient ma luna o ke kala hope o ka pae holomua.
<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>
Hiki ke hoʻolalelale ʻia ke kaha kaha kaha. Hoʻohui .progress-bar-animated
i .progress-bar
e hoʻolalelale i nā kaha ʻākau a hema ma o CSS3 animations.