Fortschrëtt
Dokumentatioun an Beispiller fir d'Benotzung vun Bootstrap personaliséiert Fortschrëtter Baren mat Ënnerstëtzung fir gestapelt Baren, animéierten Hannergrënn, an Textetiketten.
Wéi et funktionnéiert
Fortschrëtter Komponente si mat zwee HTML Elementer gebaut, e puer CSS fir d'Breet ze setzen, an e puer Attributer. Mir benotzen net den HTML5 <progress>
Element , a garantéiert datt Dir Fortschrëtterbaren stackelt, se animéieren an Textetiketten iwwer hinnen setzen.
- Mir benotzen den
.progress
als Wrapper fir de maximale Wäert vun der Fortschrëttbar unzeginn. - Mir benotzen déi bannenzeg
.progress-bar
fir de Fortschrëtt bis elo unzeweisen. - Et
.progress-bar
erfuerdert en Inline Stil, Utility Klass oder Custom CSS fir hir Breet ze setzen. - De
.progress-bar
erfuerdert och e puerrole
anaria
Attributer fir et zougänglech ze maachen.
Setzt dat alles zesummen, an Dir hutt déi folgend Beispiller.
<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 bitt eng Handvoll Utilities fir d'Breet ze setzen . Ofhängeg vun Äre Bedierfnesser, kënnen dës hëllefe fir séier Fortschrëtter ze konfiguréieren.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Etiketten
Füügt Etiketten op Är Fortschrëtterbaren andeems Dir Text an der .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>
Héicht
Mir setzen nëmmen e height
Wäert op der .progress
, also wann Dir dee Wäert ännert, wäert den Innere .progress-bar
automatesch d'Gréisst änneren.
<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>
Hannergrënn
Benotzt Hannergrond Utility Klassen fir d'Erscheinung vun eenzelne Fortschrëtter Baren z'änneren.
<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>
Multiple Baren
Maacht verschidde Fortschrëtterbaren an engem Fortschrëttskomponent un wann Dir braucht.
<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>
Gestreift
Füügt .progress-bar-striped
un all .progress-bar
fir e Sträif iwwer CSS Gradient iwwer d'Fortschrëttbar Hannergrondfaarf anzesetzen.
<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>
Animéiert Sträifen
De gesträifte Gradient kann och animéiert ginn. Füügt .progress-bar-animated
un .progress-bar
fir d'Sträifen vu riets op lénks iwwer CSS3 Animatiounen ze animéieren.
<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>