Ci gaba
Takaddun bayanai da misalai don amfani da sandunan ci gaba na al'ada na Bootstrap waɗanda ke nuna goyan baya ga sandunan da aka tattara, abubuwan rayayye, da alamun rubutu.
Yadda yake aiki
An gina abubuwan ci gaba tare da abubuwan HTML guda biyu, wasu CSS don saita faɗin, da ƴan sifofi. Ba ma amfani da kashi na HTML5<progress>
, yana tabbatar da cewa zaku iya tara sandunan ci gaba, raya su, da sanya alamun rubutu akan su.
- Muna amfani da
.progress
a matsayin abin rufewa don nuna max darajar mashigin ci gaba. - Muna amfani da ciki
.progress-bar
don nuna ci gaban ya zuwa yanzu. - Wannan
.progress-bar
yana buƙatar salon layi, aji mai amfani, ko CSS na al'ada don saita faɗin su. - Hakanan
.progress-bar
yana buƙatar wasurole
daaria
sifofi don sanya shi isa.
Haɗa wannan duka, kuma kuna da misalai masu zuwa.
<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 yana ba da ɗimbin kayan aiki don saita faɗin . Dangane da bukatun ku, waɗannan na iya taimakawa tare da daidaita ci gaba cikin sauri.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Lakabi
Ƙara lakabi zuwa sandunan ci gaba ta hanyar sanya rubutu a cikin .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>
Tsayi
Mu kawai muna saita height
ƙima akan .progress
, don haka idan kun canza wannan ƙimar abin ciki .progress-bar
zai sake girma ta atomatik daidai.
<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>
Bayanan baya
Yi amfani da azuzuwan mai amfani na baya don canza kamannin sandunan ci gaba ɗaya ɗaya.
<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>
Sanduna da yawa
Haɗa sandunan ci gaba da yawa a cikin ɓangaren ci gaba idan kuna buƙata.
<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>
Tatsi
Ƙara .progress-bar-striped
zuwa kowane .progress-bar
don amfani da tsiri ta hanyar CSS gradient akan launi na bangon ci gaba.
<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>
Rage ratsi
Hakanan za'a iya raye-rayen raye-rayen raye-raye. Ƙara .progress-bar-animated
zuwa .progress-bar
rayayye ratsi dama zuwa hagu ta hanyar rayarwa ta CSS3.
<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>