Progress -Bar -Styling in Bootstrap 5
So erstellen Sie eine Fortschrittsleiste
Setzen Sie die zum Zwecke der Erzeugung einer Fortschrittsleiste die .Fortschritt Klasse für das Vorgängerelement inzwischen geben .Fortschrittsanzeige dem Nachfolgerelement, während die Breite des Fortschrittsleistens unter Verwendung der Breite Eigenschaft angepasst wird.
Html
Die übergeordnete Div wurde zur Verfügung gestellt .Fortschrittsklasse Während der Kinder Div die gegeben wurde .Fortschrittsbar-Klasse. Schließlich wurde die Breite der Fortschrittsbalken auf 50% eingestellt.
Ausgang
Ein Fortschrittsbalken wurde mit Erfolg erzeugt.
Lassen Sie uns nun verschiedene Möglichkeiten lernen, wie Sie eine Fortschrittsleiste stylen können.
Wie man einen Fortschrittsbalken skaliert
Standardmäßig hat eine Fortschrittsleiste eine 16px- oder 1rem -Höhe, aber abhängig von Ihrer Präferenz können Sie die Höhe des Fortschrittsbalkens auf und ab skalieren. Zu diesem Zweck setzen Sie die gleiche Höhe für den Vorgänger Div und den Nachfolger Div.
Html
Der obige Code generiert zwei Fortschrittsbalken, eine mit einer Höhe von 20px und die zweite mit einer Höhe von 40px. Beachten Sie, dass der Fortschrittsbehälter und der Fortschrittsleiste in beiden Fällen die gleiche Höhe zugewiesen wurden.
Ausgang
Die Ausgabe zeigt zwei Fortschrittsbalken mit unterschiedlichen Höhen.
Wie man eine Fortschrittsbalken bezeichnet
Da wir wissen, dass ein Fortschrittsbalken den Fortschritt eines Prozesses zeigt, schreiben Sie daher, wenn Sie diesen Fortschritt in Zahlen oder Prozentsatz zeigen möchten.
Html
50%
Die im obige Code erstellte Fortschrittsleiste enthält ein Etikett "50%", das mit der Aufschrift „50%“ steht,. Dieses Etikett entspricht dem Fortschritt des Prozesses.
Ausgang
Ein Etikett wurde erfolgreich in die Fortschrittsleiste zugeordnet.
Wie man einen Fortschrittsbalken färbt
Wenn Sie einem Fortschrittsbalken Farben zur Verfügung stellen möchten. Die Hintergrund -Farbkurse sind .BG-Primary, .BG-Success, .BG-Sekundär, .BG-Info, .BG-Warnung, .BG-Danger, .BG-Licht, .BG-Dark, .BG-MUTE.
Html
Hier erstellen wir fünf Fortschrittsbalken mit jeweils eine andere Breite und Farbe.
Ausgang
Die Bereitstellung von Farben für die Fortschrittsbalken ergibt die Schönheit der Website.
So erstellen Sie einen gestreiften Fortschrittsbalken
Eine weitere lustige Sache, die Sie tun können, um eine Fortschrittsleiste zu stylen .Fortschrittsbar gestreift Klasse zum Kinderbehälter.
Html
Der obige Code generiert eine gestreifte Fortschrittsleiste mit 50% Breite.
Ausgang
So wird eine gestreifte Fortschrittsleiste erstellt.
Wie man einen Fortschrittsbalken animieren
Das Animieren einer Fortschrittsleiste lässt die Fortschritte innerhalb der Bar zu bewegt. Dies kann durch die Bereitstellung des .Progress-Bar-Animated Klasse zur Fortschrittsleiste zusammen mit dem .Fortschrittsbar gestreift Klasse.
Html
Hier erstellen wir eine gestreifte animierte Fortschrittsleiste mit 50% Breite.
Ausgang
Es wurde eine animierte Fortschrittsleiste erstellt.
So stapeln Sie mehrere Fortschrittsbalken
Wenn Sie mehrere Fortschrittsbalken zusammen stapeln möchten, legen Sie sie einfach in den Fortschrittsbehälter ein.
Html
Erste
Zweite
Dritte
Der obige Code stapelt jeweils drei Fortschrittsbalken mit einer anderen Breite.
Ausgang
Die obige Ausgabe zeigt drei gestapelte Fortschrittsbalken.
Abschluss
In Bootstrap 5 kann eine Fortschrittsleiste durch Zuweisen erstellt werden .Fortschritt Klasse zum übergeordneten Container und .Fortschrittsanzeige Klasse zum Kinderbehälter. Sie skalieren die Höhe eines Fortschrittsbalkens, indem Sie den Eltern- und Kindercontainern dieselbe Höhe zuweisen. Ein Fortschrittsbalken kann gekennzeichnet werden, indem ein Teil des Textes darin platziert wird, um farbenfrohe Fortschrittsbalken mithilfe der Hintergrundfarbenklassen zu erstellen. Darüber hinaus können Sie gestreifte und animierte Fortschrittsbalken mit dem erstellen .Fortschrittsbar gestreift, Und .Progress-Bar-Animated Klassen jeweils.