SourceHolomua
ʻ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.
Pehea e hana ai
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ū kekahi role
a me aria
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.
kope
<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.
kope
<div class= "progress" >
<div class= "progress-bar w-75" role= "progressbar" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Lepili
Hoʻohui i nā lepili i kāu mau pae holomua ma ke kau ʻana i nā kikokikona i loko o ka .progress-bar
.
kope
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" > 25%</div>
</div>
Kiʻekiʻe
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.
kope
<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>
Nā kāʻei kua
E hoʻohana i nā papa hana hope e hoʻololi i ke ʻano o nā pae holomua.
kope
<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>
Nā pā he nui
E hoʻokomo i nā pahu holomua he nui i kahi ʻāpana holomua inā pono ʻoe.
kope
<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>
ʻōniʻoniʻo
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.
kope
<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>
Nā kaha ʻoniʻoni
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.
E hoʻololi i ka animation
kope
<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>