ການໃຊ້ບໍລິຫານ Bootstrap 5
- ການໄປຫຍັງ BS5 ມີກວ້າງ Large
- ການໄປຕໍ່ມາ BS5 ມີກວ້າງ XXL
ພາບການຈັດກອງຂອງອຸປະກອນຂະໜາດຫຼາຍ
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| ກໍາແພງກ່ອນປະເພດ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| ວັດຖຸມວນອາວະກາດ | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
ໃນຕອນທີ່ຜ່ານມາພວກເຮົາໄດ້ສະແດງຄວາມຈະມີພາບການຈັດກອງຂອງການກວມກັບການຈັດກອງສຳລັບອຸປະກອນຂະໜາດນ້ອຍຫຼາຍທີ່ຈະຈັດກອງສຳລັບອຸປະກອນຂະໜາດນ້ອຍ 25%/75%，ອຸປະກອນຂະໜາດກາງ 50%/50% ແລະອຸປະກອນຂະໜາດໃຫຍ່ 33%/66%:
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
ແຕ່ໃນອຸປະກອນ xlarge 20% / 80% ການແບກອອກຄຸມຄວາມຈະຫຼາຍຫຼາຍກວ່າ.
ອຸປະກອນຂະໜາດຫຼາຍທີ່ຖືກກໍານົດເປັນການວັດຖຸມວນອາວະກາດ 1200 ພອນຈາກດີ。
ສຳລັບອຸປະກອນ xlarge ພວກເຮົາຈະໃຊ້ .col-xl-* ປະເພດ：
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
ບົດຢ່າງດັ່ງກ່າວຈະສົ່ງຫາການແບກອອກ 25%/75% ໃນອຸປະກອນຂະໜາດນ້ອຍ，50%/50% ໃນອຸປະກອນຂະໜາດກາງ，33%/66% ໃນອຸປະກອນຂະໜາດໃຫຍ່ ແລະ 20%/80% ໃນ xlarge ແລະ xxlarge，ພາຍໃນອຸປະກອນຂະໜາດນ້ອຍຈະມີການສະແດງປະກອບອັນໂຕນອນ 100%：
ຕົວຢ່າງ
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>World Wide Fund for Nature (WWF), ໄດ້ກໍ່ຕັ້ງຂື້ນໃນວັນທີ 29 ເມສາ 1961, ສີ່ວາງຂອງພວກເຮົາແມ່ນມົນມອງພາຍໃນປະເທດຈີນ ...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>ປີ 1980, WWF ໄດ້ມາໄປປະເທດຈີນເປັນພິເສດ, ໄດ້ຮັບເອກະສານຈາກລັດຖະບານຈີນເພື່ອດໍາເນີນການປົກປ້ອງການປະກອບກຳລັງພວກມົນມອງ ແລະ ສະຖານທີ່ຢູ່ອາໄສຂອງພວກມົນມອງ ...</p>
</div>
</div>
</div>
ຫັງ:ກະຕຸ້ນວ່າລວມຕົວເລກຈະຈະເປັນ 12.
ທີ່ໃຊ້ XLarge
ໃນຕົວຢ່າງລາຍລະອຽດພຽງແຕ່ .col-xl-6 ຊະນິດ (ບໍ່ .col-lg-*、.col-md-* ແລະ/ຫຼື .col-sm-*）。ນີ້ໝາຍຄວາມວ່າ xlarge ແລະ xxlarge ອຸປະກອນຈະຖືກແບ່ງຕັ້ງ 50%/50%. ແຕ່ສໍາລັບອຸປະກອນ large, medium, small ແລະ extra small, ຈະຖືກສະຖານທີ່ທົດລອງ (100% ກວ້າງ):
ຕົວຢ່າງ
<div class="container-fluid">
<div class="row">
<div class="col-xl-6">
<p>World Wide Fund for Nature (WWF), ໄດ້ກໍ່ຕັ້ງຂື້ນໃນວັນທີ 29 ເມສາ 1961, ສີ່ວາງຂອງພວກເຮົາແມ່ນມົນມອງພາຍໃນປະເທດຈີນ ...</p>
</div>
<div class="col-xl-6">
<p>ປີ 1980, WWF ໄດ້ມາໄປປະເທດຈີນເປັນພິເສດ, ໄດ້ຮັບເອກະສານຈາກລັດຖະບານຈີນເພື່ອດໍາເນີນການປົກປ້ອງການປະກອບກຳລັງພວກມົນມອງ ແລະ ສະຖານທີ່ຢູ່ອາໄສຂອງພວກມົນມອງ ...</p>
</div>
</div>
</div>
ວາງການຈັດການອອກບານຂອງຕົວເລກທີ່
ໃນ Bootstrap 5, ມີວິທີທີ່ງ່າຍພຽງແຕ່ສາມາດສ້າງວາງທີ່ມີກວ້າງດຽວກັນໃຫ້ທັງໝົດອຸປະກອນ: ພຽງແຕ່ຕໍ່ຕາມ .col-xl-* ຖອນເລກຈາກຊະນິດ ແລະ ນຳໃຊ້ພາຍໃນສັນຍານ col .col-xl ຊະນິດ. Bootstrap ຈະຮັບຮູ້ຈາກຈຳນວນວາງທີ່ມີ ແລະ ແຕ່ລະວາງຈະມີກວ້າງດຽວກັນ.
ຖ້າຂະໜາດໜ້າຈໍຕໍ່າກວ່າ 1200pxວ່າ ວາງຈະຕັ້ງຢູ່ລະຫວ່າງຕະຫລາດ
<!-- ສອງວາງ: ມີກວ້າງ 50% ໃນອຸປະກອນຫຼາຍກວ້າງຂື້ນ --> <div class="row"> <div class="col-xl">1 of 2</div> <div class="col-xl">2 of 2</div> </div> <!-- ສີ່ວາງ: ມີກວ້າງ 25% ໃນອຸປະກອນຫຼາຍກວ້າງຂື້ນ --> <div class="row"> <div class="col-xl">1 of 4</div> <div class="col-xl">2 of 4</div> <div class="col-xl">3 of 4</div> <div class="col-xl">4 of 4</div> </div>
- ການໄປຫຍັງ BS5 ມີກວ້າງ Large
- ການໄປຕໍ່ມາ BS5 ມີກວ້າງ XXL
