Att skapa förloppsindikatorer med Bootstrap 5 är ett enkelt sätt att indikera förloppet för en uppgift eller operation för användarna. Här är en steg-för-steg-guide om hur du skapar Bootstrap 5-förloppsindikatorer:
1. Inkludera Bootstrap:
- Lägg till Bootstrap CSS och JavaScript i ditt HTML-dokument.
2. Skapa behållaren för förloppsindikatorn:
- `
` – Detta div-element fungerar som behållare för förloppsindikatorn.
3. Lägg till förloppsindikatorn:
- `
` – Detta kapslade div-element representerar den faktiska förloppsindikatorn som kommer att fyllas.
- Lägg till ytterligare CSS-klasser för att utforma förloppsindikatorn, som "förloppsindikator-randig", "förloppsindikator-animerad" och mer.
4. Ställ in procentandelen för förloppsindikatorn:
- Använd attributen "aria-valuenow" och "aria-valuemin" för att ange aktuella respektive lägsta framstegsvärden.
- Till exempel:`
` ställer in förloppet till 70 % färdigt.
5. Ange färg för förloppsindikatorn:
- Använd attributet "stil" med egenskapen "bakgrundsfärg" för att ställa in en anpassad färg för förloppsindikatorn. Till exempel, `style="background-color:#007bff;"` ställer in förloppsindikatorn till blå.
6. Visa etikett för förloppsindikator:
- Slå in förloppsindikatorn i ett ""-element och ställ in "aria-label"-attributet för att visa en förloppsetikett för hjälpmedel som skärmläsare.
Här är ett exempel på ett kodavsnitt för en enkel Bootstrap 5-förloppsindikator:
