Bootstrap4 Fortschrittsbalken
Fortschrittsbalken können den Abschlussfortschritt von Benutzeraufgaben anzeigen.
Die Schritte zum Erstellen eines einfachen Fortschrittsbalkens sind wie folgt:
- Fügen Sie ein <div> mit.progressclass hinzu.
- Als Nächstes fügen Sie innerhalb des obigen <div> ein leeres <div> mit class.progress-barhinzu.
- Fügen Sie ein style-Attribut mit einer prozentualen Breite hinzu, zum Beispiel style="width:70%", was anzeigt, dass sich der Fortschrittsbalken an70%Position befindet.
Beispiel
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Selbst ausprobieren »
Höhe des Fortschrittsbalkens
Die Höhe des Fortschrittsbalkens beträgt standardmäßig 16px. Wir können CSS verwendenheightEigenschaft, um sie zu ändern:
Beispiel
<div class="progress" style="height:20px;">
<div class="progress-bar" style="width:40%;"></div>
</div>
Selbst ausprobieren »
Beschriftung der Fortschrittsleiste
Sie können Text in die Fortschrittsleiste einfügen, z. B. den Prozentsatz des Fortschritts:
Beispiel
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Selbst ausprobieren »
Fortschrittsleisten mit verschiedenen Farben
Standardmäßig ist die Fortschrittsleiste blau. Bootstrap4 bietet auch Fortschrittsleisten mit den folgenden Farben:
Beispiel
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
Selbst ausprobieren »
Gestreifte Fortschrittsleiste
Sie können.progress-bar-stripedclass, um einen gestreiften Fortschrittsbalken festzulegen:
Beispiel
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Selbst ausprobieren »
Animierter Fortschrittsbalken
Verwenden Sie.progress-bar-animatedclass kann dem Fortschrittsbalken eine Animation hinzufügen:
Beispiel
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
Selbst ausprobieren »
Fortschrittsbalken mit gemischten Farben
Fortschrittsbalken können auf mehrere Farben eingestellt werden:
Beispiel
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Freier Platz
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warnung
</div>
<div class="progress-bar bg-danger" style="width:20%">
Gefahr
</div>
</div>
Selbst ausprobieren »