ເອກະສານ ແລະຕົວຢ່າງສໍາລັບການນໍາໃຊ້ແຖບຄວາມຄືບໜ້າແບບກຳນົດເອງຂອງ Bootstrap ທີ່ມີການສະຫນັບສະຫນູນແຖບຊ້ອນກັນ, ພື້ນຫຼັງເຄື່ອນໄຫວ ແລະປ້າຍຂໍ້ຄວາມ.
ມັນເຮັດວຽກແນວໃດ
ອົງປະກອບຄວາມຄືບຫນ້າແມ່ນສ້າງຂຶ້ນດ້ວຍສອງອົງປະກອບ HTML, ບາງ CSS ເພື່ອກໍານົດຄວາມກວ້າງ, ແລະຄຸນລັກສະນະຈໍານວນຫນຶ່ງ. ພວກເຮົາບໍ່ໃຊ້ ອົງປະກອບ HTML5<progress>
, ໃຫ້ແນ່ໃຈວ່າທ່ານສາມາດວາງແຖບຄວາມຄືບຫນ້າ, ເຄື່ອນໄຫວໃຫ້ເຂົາເຈົ້າ, ແລະວາງປ້າຍຂໍ້ຄວາມໃສ່ພວກມັນ.
- ພວກເຮົາໃຊ້
.progress
ເປັນ wrapper ເພື່ອຊີ້ບອກມູນຄ່າສູງສຸດຂອງແຖບຄວາມຄືບຫນ້າ.
- ພວກເຮົາໃຊ້ພາຍໃນ
.progress-bar
ເພື່ອຊີ້ໃຫ້ເຫັນຄວາມຄືບຫນ້າມາເຖິງຕອນນັ້ນ.
- The
.progress-bar
ຕ້ອງການຮູບແບບ inline, ຊັ້ນປະໂຫຍດ, ຫຼື CSS ແບບກໍານົດເອງເພື່ອກໍານົດຄວາມກວ້າງຂອງພວກເຂົາ.
- The
.progress-bar
ຍັງຮຽກຮ້ອງໃຫ້ມີບາງ role
ແລະ aria
ຄຸນລັກສະນະເພື່ອເຮັດໃຫ້ມັນສາມາດເຂົ້າເຖິງໄດ້.
ເອົາມັນທັງຫມົດຮ່ວມກັນ, ແລະທ່ານມີຕົວຢ່າງຕໍ່ໄປນີ້.
Bootstrap ສະຫນອງເຄື່ອງມືຈໍານວນຫນຶ່ງ ສໍາລັບການກໍານົດຄວາມກວ້າງ . ອີງຕາມຄວາມຕ້ອງການຂອງທ່ານ, ສິ່ງເຫຼົ່ານີ້ອາດຈະຊ່ວຍໃນການຕັ້ງຄ່າຄວາມຄືບຫນ້າຢ່າງໄວວາ.
ປ້າຍກຳກັບ
ເພີ່ມປ້າຍກຳກັບໃສ່ແຖບຄວາມຄືບໜ້າຂອງທ່ານໂດຍການວາງຂໍ້ຄວາມພາຍໃນ .progress-bar
.
ຄວາມສູງ
ພວກເຮົາພຽງແຕ່ກໍານົດ height
ຄ່າຢູ່ໃນ .progress
, ດັ່ງນັ້ນຖ້າທ່ານປ່ຽນຄ່ານັ້ນພາຍໃນ .progress-bar
ຈະປັບຂະຫນາດຕາມອັດຕະໂນມັດ.
ຄວາມເປັນມາ
ໃຊ້ຫ້ອງຮຽນຜົນປະໂຫຍດພື້ນຖານເພື່ອປ່ຽນລັກສະນະຂອງແຖບຄວາມຄືບຫນ້າຂອງບຸກຄົນ.
ແຖບຫຼາຍ
ປະກອບມີແຖບຄວາມຄືບຫນ້າຫຼາຍແຖບໃນອົງປະກອບຄວາມຄືບຫນ້າຖ້າຫາກວ່າທ່ານຕ້ອງການ.
ເສັ້ນດ່າງ
ເພີ່ມ .progress-bar-striped
ໃສ່ອັນໃດກໍ .progress-bar
ໄດ້ເພື່ອນຳໃຊ້ເສັ້ນດ່າງຜ່ານ CSS gradient ໃສ່ສີພື້ນຫຼັງຂອງແຖບຄວາມຄືບໜ້າ.
ເສັ້ນດ່າງເຄື່ອນໄຫວ
ເສັ້ນດ່າງ gradient ຍັງສາມາດມີການເຄື່ອນໄຫວ. ເພີ່ມໃສ່ .progress-bar-animated
ເພື່ອ .progress-bar
ເຄື່ອນໄຫວເສັ້ນດ່າງຈາກຂວາຫາຊ້າຍຜ່ານອະນິເມຊັນ CSS3.