Bootstrap 4 Fortschrittsbalken
Grundlegender Fortschrittsbalken
Ein Fortschrittsbalken kann verwendet werden, um einem Benutzer anzuzeigen, wie weit er in einem Prozess ist.
Um eine standardmäßige Fortschrittsleiste zu erstellen, fügen Sie eine .progressKlasse zu einem Containerelement hinzu und fügen Sie die .progress-barKlasse ihrem untergeordneten Element hinzu. Verwenden Sie die CSS width-Eigenschaft, um die Breite des Fortschrittsbalkens festzulegen:
Beispiel
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Höhe des Fortschrittsbalkens
Die Höhe des Fortschrittsbalkens beträgt standardmäßig 16 Pixel. Verwenden Sie die CSS- heightEigenschaft, um sie zu ändern. Beachten Sie, dass Sie für den Fortschrittscontainer und den Fortschrittsbalken dieselbe Höhe einstellen müssen:
Beispiel
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Fortschrittsbalken-Etiketten
Fügen Sie Text in der Fortschrittsleiste hinzu, um den sichtbaren Prozentsatz anzuzeigen:
Beispiel
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Farbige Fortschrittsbalken
Standardmäßig ist der Fortschrittsbalken blau (primär). Verwenden Sie eine der Kontext-Hintergrundklassen von Bootstrap 4, um ihre Farbe zu ändern:
Beispiel
<!-- 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>
Gestreifte Fortschrittsbalken
Verwenden Sie die .progress-bar-stripedKlasse, um den Fortschrittsbalken Streifen hinzuzufügen:
Beispiel
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Animierter Fortschrittsbalken
Fügen Sie die .progress-bar-animatedKlasse hinzu, um den Fortschrittsbalken zu animieren:
Beispiel
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Mehrere Fortschrittsbalken
Fortschrittsbalken können auch gestapelt werden:
Beispiel
<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>