Het maken van voortgangsbalken met Bootstrap 5 is een eenvoudige manier om de voortgang van een taak of bewerking aan gebruikers aan te geven. Hier is een stapsgewijze handleiding voor het maken van Bootstrap 5-voortgangsbalken:
1. Bootstrap opnemen:
- Voeg de Bootstrap CSS en JavaScript toe aan uw HTML-document.
2. Maak de voortgangsbalkcontainer:
- `
` – Dit div-element dient als container voor de voortgangsbalk.
3. Voeg de voortgangsbalk toe:
- `
` – Dit geneste div-element vertegenwoordigt de daadwerkelijke voortgangsbalk die wordt gevuld.
- Voeg extra CSS-klassen toe om de voortgangsbalk vorm te geven, zoals `progress-bar-striped`, `progress-bar-animated` en meer.
4. Stel het voortgangsbalkpercentage in:
- Gebruik de attributen `aria-valuenow` en `aria-valuemin` om respectievelijk de huidige en minimale voortgangswaarden op te geven.
- Bijvoorbeeld:`
` stelt de voortgang in op 70% voltooid.
5. Stel de kleur van de voortgangsbalk in:
- Gebruik het `style` attribuut met de `background-color` eigenschap om een aangepaste voortgangsbalkkleur in te stellen. Met `style="background-color:#007bff;"` wordt de voortgangsbalk bijvoorbeeld op blauw gezet.
6. Voortgangsbalklabel weergeven:
- Verpak de voortgangsbalk in een ``-element en stel het kenmerk `aria-label` in om een voortgangslabel weer te geven voor ondersteunende technologieën zoals schermlezers.
Hier is een voorbeeldcodefragment voor een eenvoudige voortgangsbalk van Bootstrap 5:
