HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap- Fortschrittsbalken

❮ Vorherige Nächste ❯

Grundlegender Fortschrittsbalken

Ein Fortschrittsbalken kann verwendet werden, um einem Benutzer anzuzeigen, wie weit er in einem Prozess ist.

Bootstrap bietet verschiedene Arten von Fortschrittsbalken.

Ein Standard-Fortschrittsbalken in Bootstrap sieht folgendermaßen aus:

70 % abgeschlossen

Um einen standardmäßigen Fortschrittsbalken zu erstellen, fügen Sie einem Element eine .progressKlasse hinzu:<div>

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>

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

Hinweis: Um die Zugänglichkeit für Benutzer von Bildschirmleseprogrammen zu verbessern, sollten Sie die aria-*-Attribute einschließen.

Fortschrittsbalken mit Label

Ein Fortschrittsbalken mit Beschriftung sieht so aus:

70%

Entfernen Sie die .sr-onlyKlasse aus dem Fortschrittsbalken, um einen sichtbaren Prozentsatz anzuzeigen:

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>

Farbige Fortschrittsbalken

Kontextbezogene Klassen werden verwendet, um "Bedeutung durch Farben" bereitzustellen.

Die kontextbezogenen 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 Sie Fortschrittsbalken mit den verschiedenen Kontextklassen 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>

Gestreifte Fortschrittsbalken

Fortschrittsbalken können auch gestreift sein:

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

Klasse .progress-bar-stripedhinzufügen, um den Fortschrittsbalken Streifen 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>

Animierter Fortschrittsbalken

40%

Klasse .activehinzufügen, um 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>

Gestapelte Fortschrittsbalken

Fortschrittsbalken können auch gestapelt werden:

Freiraum
Warnung
Achtung

Erstellen Sie einen gestapelten Fortschrittsbalken, indem Sie mehrere Balken in denselben platzieren <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>

Testen Sie sich mit Übungen

Übung:

Fügen Sie die richtigen Klassen hinzu, damit sich dieser HTML-Code wie ein Fortschrittsbalken verhält.

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>


❮ Vorherige Nächste ❯