Neueste Web-Entwicklung Tutorials
 

Bootstrap Progress Bars


Grund Progress Bar

Ein Fortschrittsbalken kann verwendet werden, um einen Benutzer zu zeigen, wie weit er / sie in einem Prozess.

Bootstrap bietet verschiedene Arten von Fortschrittsbalken.

Eine Standard - Fortschrittsbalken in Bootstrap sieht wie folgt aus :

70% abgeschlossen

Um einen Standardfortschrittsbalken zu erstellen, fügen Sie eine .progress Klasse zu einem <div> Element:

Beispiel

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>
Versuch es selber "

Hinweis: Fortschrittsbalken werden nicht unterstützt in Internet Explorer 9 und früher (weil sie verwenden CSS3 Übergänge und Animationen einige ihrer Effekte zu erzielen).

Hinweis: Um zu helfen Verbesserung der Zugänglichkeit für Menschen Bildschirmlesegeräte verwenden, sollten Sie die umfassen aria-* Attribute.


Progress Bar mit Etikett

Ein Fortschrittsbalken mit einem Etikett sieht wie folgt aus:

70%

Entfernen Sie die .sr-only - Klasse aus dem Fortschrittsbalken einen sichtbaren Anteil zu zeigen:

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>
Versuch es selber "

Farbige Fortschrittsbalken

Kontext-bezogene Klassen werden verwendet, um eine "durch Farben Bedeutung".

Die kontextuellen Klassen, die mit Fortschrittsbalken verwendet werden können, sind:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% abgeschlossen (Erfolg)
50% abgeschlossen (info)
60% abgeschlossen (Warnung)
70% abgeschlossen (Gefahr)

Das folgende Beispiel zeigt, wie Fortschrittsbalken mit den verschiedenen Kontext Klassen zu erstellen:

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>
Versuch es selber "

Gestreifte Fortschrittsbalken

Fortschrittsbalken können auch gestreift werden:

40% abgeschlossen (Erfolg)
50% abgeschlossen (info)
60% abgeschlossen (Warnung)
70% abgeschlossen (Gefahr)

In Klasse .progress-bar-striped Streifen zu den Fortschrittsbalken hinzuzufügen:

Beispiel

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
Versuch es selber "

Animierte Progress Bar

Hier ist ein "animated" Fortschrittsbalken:

40%

In Klasse .active den Fortschrittsbalken zu animieren:

Beispiel

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>
Versuch es selber "

Gestapelte Fortschrittsbalken

Fortschrittsbalken können auch gestapelt werden:

Freiraum
Warnung
Achtung

Erstellen Sie eine Stapelfortschrittsbalken durch mehrere Balken in die gleiche Platzierung <div class="progress"> :

Beispiel

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>
Versuch es selber "

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4»