Dogfennaeth ac enghreifftiau ar gyfer defnyddio bariau cynnydd personol Bootstrap sy'n cynnwys cefnogaeth ar gyfer bariau wedi'u pentyrru, cefndiroedd animeiddiedig, a labeli testun.
Sut mae'n gweithio
Mae cydrannau cynnydd yn cael eu hadeiladu gyda dwy elfen HTML, rhai CSS i osod y lled, ac ychydig o nodweddion. Nid ydym yn defnyddio'r elfen HTML5<progress> , gan sicrhau y gallwch bentyrru bariau cynnydd, eu hanimeiddio, a gosod labeli testun drostynt.
Rydym yn defnyddio'r .progressfel deunydd lapio i nodi gwerth mwyaf y bar cynnydd.
Defnyddiwn y mewnol .progress-bari ddangos y cynnydd hyd yn hyn.
Mae .progress-barangen arddull fewnol, dosbarth cyfleustodau, neu CSS personol i osod eu lled.
Mae .progress-barhefyd angen rhai rolea arianodweddion i'w wneud yn hygyrch.
Rhowch hynny i gyd at ei gilydd, ac mae gennych yr enghreifftiau canlynol.
Mae Bootstrap yn darparu llond llaw o gyfleustodau ar gyfer gosod lled . Yn dibynnu ar eich anghenion, gall y rhain helpu i ffurfweddu cynnydd yn gyflym.
Labelau
Ychwanegwch labeli at eich bariau cynnydd trwy osod testun o fewn y .progress-bar.
25%
Uchder
Dim ond ar y , rydym yn gosod heightgwerth .progress, felly os byddwch yn newid y gwerth hwnnw bydd y mewnol .progress-baryn newid maint yn awtomatig yn unol â hynny.
Cefndiroedd
Defnyddiwch ddosbarthiadau cyfleustodau cefndir i newid ymddangosiad bariau cynnydd unigol.
Bariau lluosog
Cynhwyswch fariau cynnydd lluosog mewn cydran cynnydd os oes angen.
Stripiog
Ychwanegwch .progress-bar-stripedat unrhyw un .progress-bari roi streipen trwy raddiant CSS dros liw cefndir y bar cynnydd.
Stribedi wedi'u hanimeiddio
Gellir animeiddio'r graddiant streipiog hefyd. Ychwanegu .progress-bar-animatedat .progress-bari animeiddio'r streipiau o'r dde i'r chwith trwy animeiddiadau CSS3.