Å lage fremdriftslinjer med Bootstrap 5 er en enkel måte å indikere fremdriften til en oppgave eller operasjon til brukere. Her er en trinn-for-trinn-guide for hvordan du lager Bootstrap 5-fremdriftsindikatorer:
1. Inkluder Bootstrap:
- Legg til Bootstrap CSS og JavaScript i HTML-dokumentet ditt.
2. Opprett fremdriftslinjebeholderen:
- `
` – Dette div-elementet fungerer som beholderen for fremdriftslinjen.
3. Legg til fremdriftslinjen:
- `
` – Dette nestede div-elementet representerer den faktiske fremdriftslinjen som vil fylles opp.
- Legg til flere CSS-klasser for å style fremdriftslinjen, for eksempel «progress-bar-striped», «progress-bar-animated» og mer.
4. Angi prosentandelen for fremdriftslinjen:
- Bruk attributtene "aria-valuenow" og "aria-valuemin" for å spesifisere henholdsvis gjeldende og minimum fremdriftsverdier.
- For eksempel:`
` setter fremdriften til 70 % fullført.
5. Angi fargen på fremdriftslinjen:
- Bruk "stil"-attributtet med egenskapen "bakgrunnsfarge" for å angi en egendefinert fremdriftslinjefarge. For eksempel, `style="background-color:#007bff;"` setter fremdriftslinjen til blå.
6. Vis fremdriftslinjeetikett:
- Pakk fremdriftslinjen inn i et ""-element og sett "aria-label"-attributtet for å vise en fremdriftsetikett for hjelpeteknologier som skjermlesere.
Her er et eksempel på en kodebit for en enkel Bootstrap 5-fremdriftslinje:
