Latest web development tutorials

Bootstrap Fortschrittsbalken

In diesem Kapitel wird Bootstrap Fortschrittsbalken zu erklären. In diesem Tutorial werden Sie sehen, wie Fortschrittsbalken Laden Bootstrap zu erstellen, umleiten oder Betriebszustand.

Bootstrap Fortschrittsbalken mit CSS3 Übergänge und Animationen den Effekt zu erhalten. Ältere Versionen von Internet Explorer und Firefox 9 und früher nicht diese Funktion nicht unterstützt, Opera 12 unterstützt keine Animationen.

Die Standard-Fortschrittsbalken

Erstellen eines einfachen Fortschrittsbalken, gehen Sie folgendermaßen vor:

  • Fügen Sie eineKlasse .progress mit dem <div>.
  • Dann wird in der oben <div> innen, fügen Sie eineKlasse .progress-Bar mit einem leeren <div>.
  • Fügen Sie ein Stil-Attribut mit einer Breite in Prozent ausgedrückt, wie style = "60%"; 60% repräsentiert den Ort des Fortschrittsbalkens.

Schauen wir uns die folgenden Beispiele an:

Beispiele

<Div class = "Fortschritt"> <Div class = "Fortschrittsbalken" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%; "> <span class = "sr-only"> 40% abgeschlossen </ span> </ Div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Ein Fortschrittsbalken

Alternative Fortschrittsbalken

So erstellen Sie einen anderen Stil Fortschrittsbalken, wie folgt:

  • Fügen Sie eineKlasse .progress mit dem <div>.
  • Dann wird in der oben <div> innen, fügen Sie eineKlasse .progress-Bar und Fortschritt-bar- *leere Klasse mit einem <div>. Wo * kannErfolg, Info, Warnung, Gefahr.
  • Fügen Sie ein Stil-Attribut mit einer Breite in Prozent ausgedrückt, wie style = "60%"; 60% repräsentiert den Ort des Fortschrittsbalkens.

Schauen wir uns die folgenden Beispiele an:

Beispiele

<Div class = "Fortschritt"> <Div class = "Fortschrittsbalken Progress Bar-Erfolg" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%; "> <span class = "sr-only"> 90% komplett (erfolgreich) </ span> </ Div> </ Div> <Div class = "Fortschritt"> <Div class = "Fortschrittsbalken Progress Bar-info" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%; "> <span class = "sr-only"> 30% komplett (Information) </ span> </ Div> </ Div> <Div class = "Fortschritt"> <Div class = "Fortschrittsbalken Progress Bar-Warnung" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%; "> <span class = "sr-only"> 20% komplett (Warnung) </ span> </ Div> </ Div> <Div class = "Fortschritt"> <Div class = "Fortschrittsbalken Progress Bar-Gefahr" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%; "> <span class = "sr-only"> 10% komplett (Gefahr) </ span> </ Div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Alternative Fortschrittsbalken

Fortschrittsbalken Streifen

Erstellen Sie einen Fortschrittsbalken Streifen, gehen Sie folgendermaßen vor:

  • Das Hinzufügen einerKlasse .progress und .progress gestreiftedie <div>.
  • Dann wird in der oben <div> innen, fügen Sie eineKlasse .progress-Bar und Fortschritt-bar- *leere Klasse mit einem <div>. Wo * kannErfolg, Info, Warnung, Gefahr.
  • Fügen Sie ein Stil-Attribut mit einer Breite in Prozent ausgedrückt, wie style = "60%"; 60% repräsentiert den Ort des Fortschrittsbalkens.

Schauen wir uns die folgenden Beispiele an:

Beispiele

<Div class = "Fortschritt Fortschritt gestreiften" > <Div class = "Fortschrittsbalken Progress Bar-Erfolg" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%; "> <span class = "sr-only"> 90% komplett (erfolgreich) </ span> </ Div> </ Div> <Div class = "Fortschritt Fortschritt gestreiften" > <Div class = "Fortschrittsbalken Progress Bar-info" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%; "> <span class = "sr-only"> 30% komplett (Information) </ span> </ Div> </ Div> <Div class = "Fortschritt Fortschritt gestreiften" > <Div class = "Fortschrittsbalken Progress Bar-Warnung" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%; "> <span class = "sr-only"> 20% komplett (Warnung) </ span> </ Div> </ Div> <Div class = "Fortschritt Fortschritt gestreiften" > <Div class = "Fortschrittsbalken Progress Bar-Gefahr" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%; "> <span class = "sr-only"> 10% komplett (Gefahr) </ span> </ Div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Fortschrittsbalken Streifen

Animierte Fortschrittsbalken

Erstellen Sie eine animierte Fortschrittsbalken, gehen Sie folgendermaßen vor:

  • Das Hinzufügen einerKlasse .progress und .progress gestreiftedie <div>. Beim Hinzufügen vonKlasse .active.
  • Dann wird in der oben <div> innen, fügen Sie eineKlasse .progress-Bar mit einem leeren <div>.
  • Fügen Sie ein Stil-Attribut mit einer Breite in Prozent ausgedrückt, wie style = "60%"; 60% repräsentiert den Ort des Fortschrittsbalkens.

Dadurch wird die Streifen haben ein Gefühl der Bewegung von rechts nach links.

Schauen wir uns die folgenden Beispiele an:

Beispiele

<Div class = "Fortschritt Fortschritt gestreiften aktiv "> <Div class = "Fortschrittsbalken Progress Bar-Erfolg" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%; "> <span class = "sr-only"> 40% abgeschlossen </ span> </ Div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Animierte Fortschrittsbalken

Gestapelte Fortschrittsbalken

Sie können sogar mehrere Fortschrittsbalken stapeln. Mehrere Fortschrittsbalken auf dem gleichen.progress Stack kann realisiert werden, wie in den folgenden Beispielen gezeigt:

Beispiele

<Div class = "Fortschritt"> <Div class = "Fortschrittsbalken Progress Bar-Erfolg" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%; "> <span class = "sr-only"> 40% abgeschlossen </ span> </ Div> <Div class = "Fortschrittsbalken Progress Bar-info" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%; "> <span class = "sr-only"> 30% komplett (Information) </ span> </ Div> <Div class = "Fortschrittsbalken Progress Bar-Warnung" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%; "> <span class = "sr-only"> 20% komplett (Warnung) </ span> </ Div> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Gestapelte Fortschrittsbalken