Heim > Artikel > Web-Frontend > So legen Sie den Fortschrittsbalken in Bootstrap4 fest
So legen Sie den Fortschrittsbalken in Bootstrap4 fest
- (*-*)浩Original
- 2019-07-12 10:05:392635Durchsuche
Die Bootstrap-Komponente wird häufig in der Front-End-Entwicklung verwendet. Heute wird Ihnen in diesem Artikel die grundlegende Verwendung des Fortschrittsbalkens der Bootstrap-Komponente erläutert.
Grundlegende Verwendung des Fortschrittsbalkens (Empfohlenes Lernen: Bootstrap-Video-Tutorial)
Verlässt sich hauptsächlich auf .progress und .progress -bar
aria-valuenow Zeigt den aktuellen Wert an
aria-valuemin zeigt den minimalen Wert an
aria-valuemax gibt den maximalen Wert an
width: 60 % gibt die aktuelle Position des Fortschrittsbalkens an
Fortschrittsbalken Kann den Abschlussprozess von Benutzeraufgaben anzeigen.
Die Schritte zum Erstellen eines grundlegenden Fortschrittsbalkens sind wie folgt:
Fügen Sie ein
Fügen Sie als Nächstes im obigen
Fügen Sie ein Stilattribut mit einer in Prozent ausgedrückten Breite hinzu, z. B. „style="width:70%" bedeutet, dass sich der Fortschrittsbalken bei 70 % befindet.
Beispiel:
<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div>
Weitere technische Artikel zum Thema Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr zu erfahren!
Das obige ist der detaillierte Inhalt vonSo legen Sie den Fortschrittsbalken in Bootstrap4 fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!