Um die Fortschrittsbalkenkomponente von Bootstrap zu verwenden, um die Abschluss der Aufgaben anzuzeigen, müssen Sie folgende Schritte befolgen:
HTML -Struktur : Verwenden Sie die folgende HTML -Struktur für die grundlegende Fortschrittsleiste:
<code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
Legen Sie den Fortschritt fest : Um den Fortschritt festzulegen, müssen Sie die width
des .progress-bar
einstellen und das aria-valuenow
-Attribut aktualisieren. Wenn die Aufgabe beispielsweise 50% vollständig ist, würde Ihr HTML so aussehen:
<code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
Optionales Etikett : Sie können auch ein Etikett hinzufügen, um den Prozentsatz innerhalb der Fortschrittsleiste anzuzeigen:
<code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div></code>
Wenn Sie diese Schritte ausführen, können Sie die Fortschrittsleiste von Bootstrap verwenden, um den Abschlussstatus einer Aufgabe visuell anzugeben.
Die Fortschrittsbalkenkomponente von Bootstrap bietet verschiedene Anpassungsoptionen, um unterschiedlichen Anforderungen zu entsprechen:
Farben : Sie können die Farbe der Fortschrittsleiste ändern, indem Sie kontextbezogene Klassen wie .bg-success
, .bg-info
, .bg-warning
oder .bg-danger
hinzufügen.
<code class="html"><div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
Striped : Fügen Sie der Fortschrittsleiste einen gestreiften Effekt hinzu, indem Sie die .progress-bar-striped
-Klasse einbeziehen.
<code class="html"><div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
Animationsstreifen : Um die Streifen zu animieren, fügen Sie die .progress-bar-animated
Klasse zusätzlich zu .progress-bar-striped
hinzu.
<code class="html"><div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
Höhe : Sie können die Höhe des Fortschrittsbalkens einstellen, indem Sie die height
des .progress
ändern.
<code class="html"><div class="progress" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 50%; height: 20px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
Mehrere Balken : Sie können mehrere Fortschrittsbalken innerhalb eines einzelnen .progress
-Containers zeigen, um mehrere Fortschrittsstatus gleichzeitig darzustellen.
<code class="html"><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div></code>
Mit diesen Anpassungsoptionen können Sie das Erscheinungsbild und die Funktionalität der Fortschrittsleiste von Bootstrap an Ihre spezifischen Anforderungen anpassen.
Um die Fortschrittsleiste in Bootstrap zu animieren, um Echtzeit-Updates anzuzeigen, können Sie JavaScript verwenden, um die width
des .progress-bar
dynamisch zu aktualisieren. Hier ist ein Beispiel dafür:
HTML -Struktur : Beginnen Sie mit einer grundlegenden Fortschrittsbalkenstruktur.
<code class="html"><div class="progress" id="myProgress"> <div class="progress-bar" role="progressbar" id="myBar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div></code>
JavaScript -Code : Verwenden Sie JavaScript, um die Fortschrittsleiste zu animieren. Das folgende Beispiel zeigt einen reibungslosen Übergang von 0% auf 100%.
<code class="javascript">let progressBar = document.getElementById("myBar"); let width = 0; let interval = setInterval(frame, 50); function frame() { if (width >= 100) { clearInterval(interval); } else { width ; progressBar.style.width = width "%"; progressBar.setAttribute("aria-valuenow", width); progressBar.innerHTML = width "%"; } }</code>
CSS-Übergang : Um die Animation reibungslos zu machen, können Sie einen CSS-Übergang zum .progress-bar
hinzufügen.
<code class="css">.progress-bar { transition: width 0.5s ease-in-out; }</code>
Dieser JavaScript-Code erhöht die Breite der Fortschrittsbalken alle 50 Millisekunden inkrementell und verleiht dem Erscheinungsbild von Echtzeit-Updates. Sie können das interval
und width
an Ihre spezifischen Anforderungen einstellen.
Ja, Sie können die Fortschrittsleiste von Bootstrap verwenden, um mehrere Fortschrittsstatus gleichzeitig anzuzeigen, indem Sie mehrere .progress-bar
innerhalb eines einzelnen .progress
Containers platzieren. Hier erfahren Sie, wie es geht:
HTML-Struktur : Erstellen Sie einen .progress
und fügen Sie mehrere .progress-bar
-Elemente hinzu.
<code class="html"><div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> <div class="progress-bar bg-info" 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: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div> </div></code>
.progress-bar
mit unterschiedlichen Farben mit kontextuellen Klassen wie .bg-success
, .bg-info
und .bg-warning
anpassen, um unterschiedliche Aufgaben oder Status darzustellen. Durch die Verwendung mehrerer .progress-bar
-Elemente können Sie den Abschlussstatus mehrerer Aufgaben in einer einzigen Fortschrittsleiste visuell darstellen, was es zu einem vielseitigen Tool für die Anzeige komplexer Fortschrittsinformationen macht.
Das obige ist der detaillierte Inhalt vonWie verwende ich die Fortschrittsbalkenkomponente von Bootstrap, um die Abschluss der Aufgaben anzuzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!