Dokumentatsioon ja näited Bootstrapi kohandatud edenemisribade kasutamise kohta, mis toetavad virnastatud ribasid, animeeritud taustasid ja tekstisilte.
Kuidas see töötab
Progressi komponendid on üles ehitatud kahe HTML-i elemendiga, mõne CSS-iga laiuse määramiseks ja mõne atribuudiga. Me ei kasuta HTML5 <progress>elementi , tagades teile edenemisribade virnastamise, animeerimise ja nende kohale tekstisiltide paigutamise.
.progressEdenemisriba maksimaalse väärtuse näitamiseks kasutame ümbrisena.
.progress-barSenise edu näitamiseks kasutame sisemist .
Nende .progress-barlaiuse määramiseks on vaja tekstisisest stiili, utiliidiklassi või kohandatud CSS-i.
Selle juurdepääsetavaks muutmiseks .progress-baron vaja ka mõningaid roleja ariaatribuute.
Pange see kõik kokku ja saate järgmised näited.
Bootstrap pakub laiuse määramiseks käputäis utiliite . Sõltuvalt teie vajadustest võivad need aidata edenemist kiiresti konfigureerida.
Sildid
Lisage edenemisribadele silte, asetades teksti sisse .progress-bar.
25%
Kõrgus
Määrame heightväärtuse ainult .progress, nii et kui muudate seda väärtust, muutub sisemine suurus .progress-barautomaatselt vastavalt.
Taustad
Kasutage tausta utiliidi klasse, et muuta üksikute edenemisribade välimust.
Mitu riba
Vajadusel lisage edenemiskomponenti mitu edenemisriba.
Triibuline
Lisage .progress-bar-stripedükskõik millisele .progress-bar, et rakendada triibu CSS-i gradiendi kaudu edenemisriba taustavärvile.
Animeeritud triibud
Triibulist gradienti saab ka animeerida. Lisage .progress-bar-animated, .progress-baret animeerida triipe paremalt vasakule CSS3 animatsioonide kaudu.