Bootstrap 5 ການກໍ່ສ້າງ ການຄວບຄຸມ
- ຫນ້າທີ່ກ່ອນ ກາປະຈຳ BS5
- ຫນ້າຫນັງ ອຸງຕຸ້ມ BS5
ການເຕີມສະພາບພື້ນຖານ
ການເຕີມສະພາບສາມາດສະແດງຄວາມສະເລ່ຍຂອງຜູ້ນຳໃນຂັ້ນຕອນຂອງການດຳເນີນການ
ທ່ານຈະໃຊ້ການເພີ່ມປະສົມວັດຖຸໃຫ້ການເຕີມສະພາບລະບົບປົກກະຕິ .progress ທ່ານຈະໃຊ້ການເພີ່ມປະສົມວັດຖຸໃຫ້ປະກອບສະພາບທີ່ຢູ່ໃນການເຕີມສະພາບ ແລະ ຕັ້ງຄວາມສູງ .progress-bar ທ່ານຈະໃຊ້ການເພີ່ມປະສົມວັດຖຸໃຫ້ລູກອງທີ່ຢູ່ໃນການເຕີມສະພາບ. ທ່ານຈະໃຊ້ CSS width ວັດຖຸເພື່ອຕັ້ງຄວາມສູງການເຕີມ
ຕົວຢ່າງ
<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div>
ຄວາມສູງການເຕີມ
ຄວາມສູງການເຕີມສະພາບໂດຍມາດຕະຖານ 1rem（ປົກກະຕິ 16px）。ທ່ານຈະໃຊ້ CSS height ປະສົມປະສານວັດຖຸເພື່ອປ່ຽນເບີໂລກ
ຄຳແນະນຳ:ບໍ່ມີຄວາມຮັບຜິດຫວັງວ່າທ່ານຈະຕ້ອງການຕັ້ງຂອບເຄື່ອງລະບົບທີ່ມີຄວາມສູງດຽວກັນກັບການເຕີມສະພາບ
ຕົວຢ່າງ
<div class="progress" style="height:20px"> <div class="progress-bar" style="width:40%;height:20px"></div> </div>
ປະກອບສະພາບການເຕີມ
ການເພີ່ມຂໍ້ຄວາມໃນການເຕີມສະພາບລະບົບຈິ່ງຈະສະແດງຄວາມສະເລ່ຍຂອງການເບິ່ງຄວາມສະເລ່ຍ
ຕົວຢ່າງ
<div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div>
ການເຕີມສະພາບລະບົບ
ໃນການປະກອບກັບເອກະສານລະບົບແບບລະບົບສຳລັບການເຕີມສະພາບລະບົບສຳລັບການປ່ຽນເບີໂລກຂອງຂ້ອຍ
ຕົວຢ່າງ
<!-- Blue --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div> <!-- Green --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div> <!-- Turquoise --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div> <!-- Orange --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div> <!-- Red --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div> <!-- White --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div> <!-- ສີຂຽວ --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div> <!-- ສີຂຽວແຮງ --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div> <!-- ສີຂຽວຫນັງ --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div>
ຕົວແຜງຄວາມກ້າວໜ້າສາມາດແຮງ
ຂໍ້ສະເໜີ .progress-bar-striped ຊະນິດເພື່ອເພີ່ມຕົວແຜງຄວາມກ້າວໜ້າສາມາດແຮງ:
ຕົວຢ່າງ
<div class="progress"> <div class="progress-bar progress-bar-striped" style="width:40%"></div> </div>
ຕົວແຜງຄວາມກ້າວໜ້າ
ຂໍ້ສະເໜີ .progress-bar-animated ຊະນິດເພື່ອສ້າງຕົວແຜງຄວາມກ້າວໜ້າທີ່ກະຕຸ້ນ:
ຕົວຢ່າງ
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
ຕົວແຜງຄວາມກ້າວໜ້າຫລາຍອັນ
ຕົວແຜງຄວາມກ້າວໜ້າສາມາດຄົນຕັ້ງ:
ຕົວຢ່າງ
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
ອານານິຄົມສິບສະຫຼາດ
</div>
<div class="progress-bar bg-warning" style="width:10%">
ຄວາມເຕືອນ
</div>
<div class="progress-bar bg-danger" style="width:20%">
ຄວາມອັນຕະລາຍ
</div>
</div>
- ຫນ້າທີ່ກ່ອນ ກາປະຈຳ BS5
- ຫນ້າຫນັງ ອຸງຕຸ້ມ BS5
