Oprettelse af statusbjælker med Bootstrap 5 er en nem måde at indikere status for en opgave eller operation til brugere. Her er en trin-for-trin guide til, hvordan du opretter Bootstrap 5-statuslinjer:
1. Inkluder Bootstrap:
- Tilføj Bootstrap CSS og JavaScript til dit HTML-dokument.
2. Opret statuslinjebeholderen:
- `
` – Dette div-element fungerer som containeren for statuslinjen.
3. Tilføj statuslinjen:
- `
` – Dette indlejrede div-element repræsenterer den faktiske statuslinje, der vil fylde op.
- Tilføj yderligere CSS-klasser for at style statuslinjen, såsom 'fremskridtslinje-stribet', 'fremskridtslinje-animeret' og mere.
4. Indstil Progress Bar Procent:
- Brug attributterne `aria-valuenow` og `aria-valuemin` til at angive henholdsvis den aktuelle og den minimale fremskridtsværdi.
- For eksempel:`
` indstiller fremskridtet til 70 % fuldført.
5. Indstil farven på statuslinjen:
- Brug attributten "stil" med egenskaben "baggrundsfarve" for at indstille en brugerdefineret farve på statuslinjen. For eksempel sætter `style="background-color:#007bff;"` statuslinjen til blå.
6. Vis statuslinje-etiket:
- Pak statuslinjen ind i et ``-element, og indstil attributten `aria-label` for at vise en statuslabel til hjælpeteknologier som skærmlæsere.
Her er et eksempel på et kodestykke til en simpel Bootstrap 5-statuslinje:
