Pag-uswag
Dokumentasyon ug mga pananglitan sa paggamit sa Bootstrap custom progress bars nga adunay suporta alang sa stacked bars, animated backgrounds, ug text labels.
Giunsa kini paglihok
Ang mga sangkap sa pag-uswag gitukod nga adunay duha ka elemento sa HTML, pipila ka CSS aron itakda ang gilapdon, ug pipila ka mga kinaiya. Wala namo gamita ang HTML5 <progress>
nga elemento , pagsiguro nga mahimo nimong i-stack ang mga progress bar, i-animate kini, ug ibutang ang mga text label sa ibabaw niini.
- Gigamit namon ang
.progress
ingon usa ka wrapper aron ipakita ang labing taas nga kantidad sa progress bar. - Gigamit namon ang sulud
.progress-bar
aron ipakita ang pag-uswag hangtod karon. - Ang
.progress-bar
nanginahanglan usa ka inline nga istilo, klase sa utility, o naandan nga CSS aron mabutang ang ilang gilapdon. - Nanginahanglan
.progress-bar
usab ang pipilarole
ugaria
mga hiyas aron mahimo kini nga ma-access.
Ibutang kanang tanan, ug aduna kay mosunod nga mga pananglitan.
<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>
Naghatag ang Bootstrap og pipila ka mga gamit alang sa pagtakda sa gilapdon . Depende sa imong mga panginahanglan, kini mahimong makatabang sa dali nga pag-configure sa pag-uswag.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Mga label
Idugang ang mga label sa imong progress bar pinaagi sa pagbutang og teksto sulod sa .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>
Gitas-on
Nagbutang lang kami og height
bili sa .progress
, mao nga kung imong usbon kana nga kantidad ang sulod .progress-bar
awtomatik nga magbag-o sumala niana.
<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>
Mga background
Gamita ang mga klase sa gamit sa background aron mabag-o ang hitsura sa indibidwal nga mga bar sa pag-uswag.
<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>
Daghang mga bar
Ilakip ang daghang mga progress bar sa usa ka bahin sa pag-uswag kung kinahanglan nimo.
<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>
Kinudlisan
Idugang .progress-bar-striped
sa bisan unsa .progress-bar
aron magamit ang usa ka stripe pinaagi sa CSS gradient ibabaw sa kolor sa background sa progress bar.
<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>
Animated nga mga stripe
Ang striped gradient mahimo usab nga ma-animate. Idugang .progress-bar-animated
sa .progress-bar
aron ma-animate ang mga labud sa tuo ngadto sa wala pinaagi sa CSS3 nga mga animation.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>