Bootstrap 4 Progress Bars
Basiese vorderingsbalk
'n Vorderingsbalk kan gebruik word om 'n gebruiker te wys hoe ver hy/sy in 'n proses is.
Om 'n verstekvorderingsbalk te skep, voeg 'n .progressklas by 'n houerelement en voeg die .progress-barklas by sy kinderelement. Gebruik die CSS width-eienskap om die breedte van die vorderingsbalk te stel:
Voorbeeld
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Progress Bar Hoogte
Die hoogte van die vorderingsbalk is by verstek 16px. Gebruik die CSS- heighteienskap om dit te verander. Let daarop dat jy dieselfde hoogte moet stel vir die vorderinghouer en die vorderingsbalk:
Voorbeeld
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Progress Bar Etikette
Voeg teks binne die vorderingsbalk by om die sigbare persentasie te wys:
Voorbeeld
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Gekleurde vorderingstawe
By verstek is die vorderingsbalk blou (primêr). Gebruik enige van die Bootstrap 4 kontekstuele agtergrondklasse om die kleur daarvan te verander:
Voorbeeld
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Gestreepte Progress Bars
Gebruik die .progress-bar-stripedklas om strepe by die vorderingstawe te voeg:
Voorbeeld
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Geanimeerde vorderingsbalk
Voeg die .progress-bar-animatedklas by om die vorderingsbalk te animeer:
Voorbeeld
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Veelvuldige vorderingstawe
Vorderingstawe kan ook gestapel word:
Voorbeeld
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>