Bootstrap 5 Voortgangsbalk

Basis voortgangsbalk

De voortgangsbalk kan worden gebruikt om de voortgang van de gebruiker in een proces weer te geven.

Om een standaard voortgangsbalk te maken, voeg .progress klasse toe aan het container-element en voeg .progress-bar Voeg een klasse toe aan zijn subelementen. Gebruik de CSS width-eigenschap om de breedte van de voortgangsbalk in te stellen:

Voorbeeld

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Probeer het zelf

Voortgangsbalkhoogte

De standaardhoogte van de voortgangsbalk is 1rem（meestal 16px）。Gebruik CSS hoogte eigenschappen om het te wijzigen.

Tip:Let op, je moet dezelfde hoogte instellen voor de voortgangscontainer en de voortgangsbalk:

Voorbeeld

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

Probeer het zelf

Voortgangsbalk-etiket

Voeg tekst toe aan de voortgangsbalk om het zichtbare percentage weer te geven:

Voorbeeld

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Probeer het zelf

Kleurrijke voortgangsbalk

Standaard is de voortgangsbalk blauw (hoofd). Gebruik elke contextuele achtergrondklasse om de kleur te wijzigen:

Voorbeeld

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grijs -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Lichtgrijs -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Donkergrijs -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Probeer het zelf

Streep进度条

Gebruik .progress-bar-striped Gebruik een klasse om strepen toe te voegen aan de progressbalk:

Voorbeeld

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Probeer het zelf

Progressbalk animatie

Voeg toe .progress-bar-animated Gebruik een klasse om een progressbalk te maken:

Voorbeeld

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

Probeer het zelf

Meerdere progressbalken

Progressbalken kunnen ook gestapeld worden:

Voorbeeld

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Vrije ruimte
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Waarschuwing
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Gevaar
  </div>
</div>

Probeer het zelf