Dokumentasjon og eksempler for bruk av Bootstrap-tilpassede fremdriftslinjer med støtte for stablede stolper, animerte bakgrunner og tekstetiketter.
Hvordan det fungerer
Fremdriftskomponenter er bygget med to HTML-elementer, noen CSS for å angi bredden, og noen få attributter. Vi bruker ikke HTML5- <progress>elementet , noe som sikrer at du kan stable fremdriftslinjer, animere dem og plassere tekstetiketter over dem.
Vi bruker .progresssom en innpakning for å indikere maksverdien til fremdriftslinjen.
Vi bruker den indre .progress-barfor å indikere fremgangen så langt.
De .progress-barkrever en innebygd stil, verktøyklasse eller tilpasset CSS for å angi bredden.
Den .progress-barkrever også noen roleog ariaattributter for å gjøre den tilgjengelig.
Sett alt sammen, og du har følgende eksempler.
Bootstrap gir en håndfull verktøy for å angi bredde . Avhengig av dine behov, kan disse hjelpe deg med å raskt konfigurere fremdriften.
Etiketter
Legg til etiketter på fremdriftslinjene dine ved å plassere tekst i .progress-bar.
25 %
Høyde
Vi setter bare en heightverdi på .progress, så hvis du endrer den verdien vil den indre .progress-barautomatisk endre størrelsen tilsvarende.
Bakgrunner
Bruk bakgrunnsverktøyklasser for å endre utseendet til individuelle fremdriftslinjer.
Flere stolper
Inkluder flere fremdriftslinjer i en fremdriftskomponent hvis du trenger det.
Stripete
Legg .progress-bar-stripedtil en hvilken som helst .progress-barfor å bruke en stripe via CSS-gradient over fremdriftslinjens bakgrunnsfarge.
Animerte striper
Den stripete gradienten kan også animeres. Legg .progress-bar-animatedtil .progress-barfor å animere stripene fra høyre til venstre via CSS3-animasjoner.