Bootstrap Fortschrittsbalken
Dieses Kapitel erklärt Bootstrap-Fortschrittsbalken. In diesem Tutorial sehen Sie, wie Sie Bootstrap verwenden, um Fortschrittsbalken für Lade-, Weiterleitungs- oder Aktionsstatus zu erstellen.
Bootstrap-Fortschrittsbalken verwenden CSS3-Übergänge und -Animationen, um diesen Effekt zu erzielen. Internet Explorer 9 und ältere Versionen sowie alte Firefox-Versionen unterstützen diese Funktion nicht; Opera 12 unterstützt keine Animationen.
Standard-Fortschrittsbalken
Befolgen Sie diese Schritte, um einen einfachen Fortschrittsbalken zu erstellen:
- Fügen Sie ein <div> mit der Klasse.progresszum <div> hinzu.
- Fügen Sie als Nächstes innerhalb des obigen <div> ein <div> mit der Klasse.progress-barzum leeren <div> hinzu.
- Fügen Sie ein style-Attribut mit einer als Prozentsatz ausgedrückten Breite hinzu, zum Beispiel style="60%"; dies zeigt an, dass sich der Fortschrittsbalken bei 60% befindet.
Schauen wir uns das folgende Beispiel an:.sr-onlyDie Klasse kann Textinhalt ausblenden:
Beispiel
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% complete</span>
</div>
</div>
Selbst ausprobieren »
Das Ergebnis wird unten angezeigt:
Sie können auch Textinhalt im Fortschrittsbalken festlegen:
Beispiel
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
Selbst ausprobieren »
Das Ergebnis wird unten angezeigt:
Alternative Fortschrittsbalken
Befolgen Sie diese Schritte, um Fortschrittsbalken mit verschiedenen Stilen zu erstellen:
- Fügen Sie ein <div> mit der Klasse.progresszum <div> hinzu.
- Fügen Sie als Nächstes innerhalb des obigen <div> ein <div> mit der Klasse.progress-barund der Klasseprogress-bar-*zum leeren <div> hinzu. Wobei * sein kann:success, info, warning, danger。
- Fügen Sie ein style-Attribut mit einer als Prozentsatz ausgedrückten Breite hinzu, zum Beispiel style="60%"; dies zeigt an, dass sich der Fortschrittsbalken bei 60% befindet.
Schauen wir uns das folgende Beispiel an:
Beispiel
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% complete (info)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% complete (danger)</span>
</div>
</div>
Selbst ausprobieren »
Das Ergebnis wird unten angezeigt:
Textinhalt des Fortschrittsbalkens anzeigen:
Beispiel
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
Selbst ausprobieren »
Das Ergebnis wird unten angezeigt:
Gestreifte Fortschrittsbalken
Befolgen Sie diese Schritte, um einen gestreiften Fortschrittsbalken zu erstellen:
- Fügen Sie ein <div> mit der Klasse.progressund.progress-stripedzum <div> hinzu.
- Fügen Sie als Nächstes innerhalb des obigen <div> ein <div> mit der Klasse.progress-barund der Klasseprogress-bar-*zum leeren <div> hinzu. Wobei * sein kann:success, info, warning, danger。
- Fügen Sie ein style-Attribut mit einer als Prozentsatz ausgedrückten Breite hinzu, zum Beispiel style="60%"; dies zeigt an, dass sich der Fortschrittsbalken bei 60% befindet.
Schauen wir uns das folgende Beispiel an:
Beispiel
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% complete (info)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% complete (danger)</span>
</div>
</div>
Selbst ausprobieren »
Das Ergebnis wird unten angezeigt:
Animierte Fortschrittsbalken
Befolgen Sie diese Schritte, um einen animierten Fortschrittsbalken zu erstellen:
- Fügen Sie ein <div> mit der Klasse.progressund.progress-stripedzum <div> hinzu. Fügen Sie außerdem die Klasse.active hinzu.。
- Fügen Sie als Nächstes innerhalb des obigen <div> ein <div> mit der Klasse.progress-barzum leeren <div> hinzu.
- Fügen Sie ein style-Attribut mit einer als Prozentsatz ausgedrückten Breite hinzu, zum Beispiel style="60%"; dies zeigt an, dass sich der Fortschrittsbalken bei 60% befindet.
Dies verleiht den Streifen einen Bewegungseffekt von rechts nach links.
Schauen wir uns das Beispiel unten an:
Beispiel
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% complete</span>
</div>
</div>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Gestapelte Fortschrittsbalken
Sie können sogar mehrere Fortschrittsbalken stapeln. Platzieren Sie mehrere Fortschrittsbalken im selben.progress, um Stapelung zu erreichen, wie im folgenden Beispiel gezeigt:
Beispiel
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% complete</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% complete (info)</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% complete (warning)</span>
</div>
</div>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
Größen des Fortschrittsbalkens
Wir können die Größe des Fortschrittsbalkens über das height-Attribut einstellen:
Beispiel
<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>
Selbst ausprobieren »
Das Ergebnis ist wie folgt:
