TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich Bootstrap 5-Fortschrittsbalken?

39

Fortschrittsbalken werden verwendet, um Fähigkeiten, den Prozentsatz der abgeschlossenen Projekte und ähnliche Zwecke zu zeigen. Bootstrap 5 hat unterschiedliche Arten von Fortschrittsbalken, ähnlich wie in früheren Versionen. In diesem Tutorial lassen Sie uns mehr über jede Art von Fortschrittsbalken erfahren, die in Bootstrap 5 angeboten werden.

Bootstrap 5 Fortschrittsbalken-Tutorial

  1. HTML5-Fortschrittsbalken
  2. Bootstrap-Fortschrittsbalken CSS-Klassen
  3. Erstellen von Standard-Fortschrittsbalken
  4. Fortschrittsbalken mit unterschiedlichen Hintergrundfarben
  5. Hinzufügen von Labels in Fortschrittsbalken
  6. Mehrere Fortschrittsbalken
  7. Gestreifter Stil
  8. Animierter Streifenstil
  9. Höhe einstellen

Lassen Sie uns jedes Thema im Detail besprechen.

1 HTML5-Fortschrittsbalken

Denken Sie daran, dass HTML5 ein Standard-Tag hat, um horizontale Fortschrittsbalken zu erstellen, was in den meisten Fällen ausreicht. Unten sehen Sie den Codeblock der HTML5-Fortschrittsbalken.

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

Im Browser sieht es wie folgt aus:

50 %

60%

70%

80%

Bootstrap verwendet keine HTML5-Fortschrittsleiste und hat einen eigenen Stil für die Fortschrittsleistenkomponente.

2 CSS-Klassen, die in Bootstrap-Fortschrittsbalken verwendet werden

Bootstrap 4 verwendet die folgenden CSS- Klassen, um Fortschrittsbalken zu erstellen:

  • Die Klasse ".progress" wird für den äußeren Wrapper für den Fortschrittsbalken verwendet. Sie wird verwendet, um mehrere Fortschrittsbalken innerhalb des Wrappers zu enthalten.
  • Die Klasse ".progress-bar" wird verwendet, um einen tatsächlichen Fortschrittsbalken zu erstellen, der den Prozentsatz des Fortschritts anzeigt.
  • Die Breite jedes Fortschrittsbalkens sollte mit zusätzlichen CSS-Klassen explizit definiert werden.
  • Außerdem können Sie der Fortschrittsleiste aus Gründen der Lesbarkeit die Attribute „Rolle” und „Aria” hinzufügen.
  • „aria-valuenow” wird verwendet, um den aktuellen Fortschrittswert anzuzeigen, „aria-valuemin” ist der minimale Wert von 0 und „aria-valuemax” ist der maximale Wert von 100.

Lassen Sie uns einige Beispiele mit diesen Klassen erstellen.

3 Standard-Fortschrittsbalken

Der standardmäßige Fortschrittsbalken verwendet die Primärfarbe zur Anzeige des Fortschritts und hellgrau für den Hintergrund. Unten ist der Code zum Erstellen von fünf Fortschrittsbalken mit 0, 25, 50, 75 und 100 % Fortschritt.

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Im Browser sieht es wie folgt aus:

Wie oben erwähnt, sollte jeder Fortschrittsbalken eine explizit definierte Breite haben, um den Abschluss anzuzeigen. Zu diesem Zweck können Sie entweder Inline-Stil- oder Dienstprogrammklassen verwenden. Wir haben die Nutzgrößenklassen für 25 %, 50 % und 75 % mit w-25, w-50 bzw. w-75 verwendet. Für 100 % Breite haben wir den Inline-Stil mit „width:100 %” verwendet.

Denken Sie auch daran, einen manuellen Zeilenumbruch zwischen den Fortschrittsbalken hinzuzufügen, um zu vermeiden, dass alle Balken in derselben Zeile angezeigt werden.

4 Fortschrittsbalken mit Hintergründen

Ähnlich wie bei vielen anderen Komponenten können Sie einfach die Hintergrunddienstprogrammklassen verwenden, um den Hintergrund in Erfolg, Warnung, Info, Gefahr, dunkle oder sekundäre Farben zu ändern.

<div class="progress"> <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div> </div> <div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div> </div>

Die Fortschrittsbalken sehen wie folgt aus:

Wie erstelle ich Bootstrap 5-Fortschrittsbalken?

Beachten Sie, dass die Primärfarbe der Standardwert ist, sodass Sie nicht angeben müssen, ob der Fortschritt in Primärfarbe angezeigt werden soll. Sie können auch keine helle Hintergrundfarbe verwenden, da der Hintergrund des Fortschrittsbalkens ebenfalls hell ist.

Sie können Hintergrunddienstprogrammklassen im äußeren Fortschrittswrapper verwenden, um den Hintergrund des Fortschrittsbalkens zu ändern. Der folgende Code erzeugt beispielsweise den Fortschrittsbalken mit rotem (Gefahren-) Farbhintergrund anstelle von hellgrau.

<div class="progress bg-danger"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

Das Ergebnis sieht im Browser wie folgt aus:

Wie erstelle ich Bootstrap 5-Fortschrittsbalken?

5 Fortschrittsbalken mit Beschriftungen

Wenn Sie die Beschriftungen zum Fortschrittsbalken hinzufügen möchten, fügen Sie einfach den Text vor dem Schließen hinzu

Tag jedes Fortschrittsbalkens. Unten ist ein Beispiel für eine 75%ige Fertigstellung:

<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div> </div>

Das Etikett wird oben auf der Leiste mit zentrierter Ausrichtung wie unten angezeigt:

Wie erstelle ich Bootstrap 5-Fortschrittsbalken?

6 Mehrere Fortschrittsbalken

Durch das Hinzufügen mehrerer Fortschrittsbalken in einem einzigen äußeren Wrapper werden alle Balken in einer einzigen Zeile erstellt.

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div>

Die mehreren Fortschrittsbalken sehen wie folgt aus:

Wie erstelle ich Bootstrap 5-Fortschrittsbalken?

7 gestreifte Fortschrittsbalken

Die Klasse „.progress-bar-striped” wird verwendet, um gestreifte Fortschrittsbalken zu erstellen (die Hintergrund-Utility-Klasse wird verwendet, um verschiedene Farben anzuzeigen).

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div>

Gestreifte Fortschrittsbalken sollten wie folgt aussehen:

Wie erstelle ich Bootstrap 5-Fortschrittsbalken?

8 animierte gestreifte Fortschrittsbalken

Die letzte Möglichkeit besteht darin, den Streifen mit der Klasse „.progress-bar-animated” zu animieren.

<div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div> </div>

Dadurch wird ein animierter Fortschrittsbalken mit grünen Streifen erstellt. Denken Sie daran, dass Sie nur die gestreiften Balken animieren können und nicht die Standardbalken.

9 Ändern der Höhe oder Dicke von Fortschrittsbalken

Standardmäßig haben die Fortschrittsbalken eine Höhe von 1 Rem. Sie können die Höhe mit dem Inline-Stil innerhalb der Klasse ".progress-bar" ändern und der äußere Wrapper wird automatisch entsprechend ausgerichtet. Lassen Sie uns zwei Balken mit 0.rem und 30px Höhe erstellen:

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

Das Ergebnis sollte im Browser wie folgt aussehen:

Wie erstelle ich Bootstrap 5-Fortschrittsbalken?

Das Problem beim Ändern der Höhe besteht darin, dass die Etiketten bei der Verwendung nicht richtig ausgerichtet werden. Auch hier sollten Sie zusätzliche Stile manuell verwenden, um die Beschriftungen in der vertikalen Mitte auszurichten.


Bootstrap 5 lernen (Index )


Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. AnnehmenMehr Details

Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen