So legen Sie den Fortschrittsbalken in Bootstrap4 fest-Bootstrap-Tutorial-php.cn

So legen Sie den Fortschrittsbalken in Bootstrap4 fest

(*-*)浩

Freigeben： 2019-07-27 16:54:38

Original

2719 Leute haben es durchsucht

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.

So legen Sie den Fortschrittsbalken in Bootstrap4 fest

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

hinzu.

Fügen Sie als Nächstes im obigen

ein leeres

mit der Klasse .progress-bar hinzu.

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>

Nach dem Login kopieren

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!

Verwandte Etiketten：

bootstrap4

Quelle：php.cn

Vorheriger Artikel：So richten Sie eine modale Box in Bootstrap4 ein Nächster Artikel：So richten Sie ein Popup-Fenster in Bootstrap4 ein

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors