Cynnydd
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.
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
.progress
fel deunydd lapio i nodi gwerth mwyaf y bar cynnydd. - Defnyddiwn y mewnol
.progress-bar
i ddangos y cynnydd hyd yn hyn. - Mae
.progress-bar
angen arddull fewnol, dosbarth cyfleustodau, neu CSS personol i osod eu lled. - Mae
.progress-bar
hefyd angen rhairole
aaria
nodweddion i'w wneud yn hygyrch.
Rhowch hynny i gyd at ei gilydd, ac mae gennych yr enghreifftiau canlynol.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
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.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Ychwanegwch labeli at eich bariau cynnydd trwy osod testun o fewn y .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Dim ond ar y , rydym yn gosod height
gwerth .progress
, felly os byddwch yn newid y gwerth hwnnw bydd y mewnol .progress-bar
yn newid maint yn awtomatig yn unol â hynny.
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Defnyddiwch ddosbarthiadau cyfleustodau cefndir i newid ymddangosiad bariau cynnydd unigol.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Cynhwyswch fariau cynnydd lluosog mewn cydran cynnydd os oes angen.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Ychwanegwch .progress-bar-striped
at unrhyw un .progress-bar
i roi streipen trwy raddiant CSS dros liw cefndir y bar cynnydd.
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Gellir animeiddio'r graddiant streipiog hefyd. Ychwanegu .progress-bar-animated
at .progress-bar
i animeiddio'r streipiau o'r dde i'r chwith trwy animeiddiadau CSS3.