Bootstrap 5 Grid: Small Devices
- ການເບິ່ງຕໍ່ຫລັງນີ້ BS5 Grid XSmall
- ການເບິ່ງຕໍ່ໜ້າໜ້ານີ້ BS5 Grid Medium
ຄວາມຫຼາຍຂອງການປະກອບຕັດເບິ່ງສັນຂອງອຸປະກອນນ້ອຍ
| 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%.
ອຸປະກອນນ້ອຍຖືກກໍານົດວ່າຫົວອອກໜ້າຈໍານວນຄວາມສະແດງຈາກ 576 ຄວາມສະແດງ ຫາ 767 ຄວາມສະແດງ.
ສໍາລັບອຸປະກອນນ້ອຍພວກເຮົາຈະໃຊ້ .col-sm-* ນັກວິດີໂອ.
ພວກເຮົາຈະເພີ່ມນັກວິດີໂອໃຫ້ສອງສັນ:
<div class="col-sm-3">....</div> <div class="col-sm-9">....</div>
ຕົວຢ່າງດັ່ງກ່າວຈະປະກອບເປັນ 25% / 75% ຕັດເບິ່ງໃນອຸປະກອນນ້ອຍ (ແລະ ອຸປະກອນມວນຫຼາຍ, ອຸປະກອນໃຫຍ່, ອຸປະກອນຂະໜາດໃຫຍ່ ແລະ ອຸປະກອນຂະໜາດຫຼາຍ): ໃນອຸປະກອນນ້ອຍຈະປະກອບເປັນ 100%:
ຕົວຢ່າງ
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-primary">
<p>World Wide Fund for Nature (WWF), ໄດ້ຖືກກໍ່ຕັ້ງຂື້ນໃນວັນທີ 29 ເມສາ 1961, ສີນວັດພາບຂອງມັນແມ່ນໝາປາວານ ...</p>
</div>
<div class="col-sm-9 bg-dark">
<p>1980ປີ, WWF ໄດ້ມາໄປປະເທດຈີນຢ່າງເປັນທາງການ, ໄດ້ຮັບການເຊີນຮອງຈາກລັດຖະບານຈີນເພື່ອປະຕິບັດວຽກການປົກປ້ອງປາວານປ່າວາງ ...</p>
</div>
</div>
</div>
ເຂົ້າໃຈ:ຮັບປະກັນໃຫ້ຈຳນວນທັງໝົດຢູ່ຫຼາຍຫຼືບໍ່ຫຼາຍກວ່າ 12 (ບໍ່ຕ້ອງໃຊ້ບໍ່ທັງ 12 ອີກ):
ສໍາລັບ 33.3% / 66.6% ຕັດເບິ່ງເຈົ້າຄວນໃຊ້ .col-sm-4 ແລະ .col-sm-8ສໍາລັບ 50% / 50% ຕັດເບິ່ງເຈົ້າຄວນໃຊ້ .col-sm-6 ແລະ .col-sm-6)：
ຕົວຢ່າງ
ແບບແບະ 33.3/66.6% ຕັດເບິ່ງ:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-primary">
<p>World Wide Fund for Nature (WWF), ໄດ້ຖືກກໍ່ຕັ້ງຂື້ນໃນວັນທີ 29 ເມສາ 1961, ສີນວັດພາບຂອງມັນແມ່ນໝາປາວານ ...</p>
</div>
<div class="col-sm-8 bg-dark">
<p>1980ປີ, WWF ໄດ້ມາໄປປະເທດຈີນຢ່າງເປັນທາງການ, ໄດ້ຮັບການເຊີນຮອງຈາກລັດຖະບານຈີນເພື່ອປະຕິບັດວຽກການປົກປ້ອງປາວານປ່າວາງ ...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>World Wide Fund for Nature (WWF), ໄດ້ຖືກກໍ່ຕັ້ງຂື້ນໃນວັນທີ 29 ເມສາ 1961, ສີນວັດພາບຂອງມັນແມ່ນໝາປາວານ ...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>1980ປີ, WWF ໄດ້ມາໄປປະເທດຈີນຢ່າງເປັນທາງການ, ໄດ້ຮັບການເຊີນຮອງຈາກລັດຖະບານຈີນເພື່ອປະຕິບັດວຽກການປົກປ້ອງປາວານປ່າວາງ ...</p>
</div>
</div>
</div>
ການຕັ້ງວາງອາຍຸອັນດຽວ
ໃນ Bootstrap 5, ມີວິທີທີ່ງາມຫລາຍທີ່ຈະສ້າງອາຍຸທີ່ມີວາງແວດຍະວາງດຽວໃຫ້ທຸກອຸປະກອນ: ພຽງແຕ່ຕ້ອງຖ່າຍມາຈາກ .col-sm-* ປົດຕົວເລກຈາກ ປະກອບອາຍຸຕິດຕາມ .col-sm ຊະນິດ. Bootstrap ຈະຮັບຮູ້ຈາກຈຳນວນອັນດຽວທີ່ມີອາຍຸແລະແຕ່ລະອາຍຸຈະມີວາງແວດຍະວາງດຽວກັນ.
ຖ້າຂະໜາດໜ້າຈໍານວນຕໍ່າກວ່າ 576pxວ່າອາຍຸ:
<!-- ສອງອັນ: ວາງແວດຍະວາງສິບເຈັດເຖິງຈະຫລາຍຫນັງທີ່ບໍ່ແມ່ນອຸປະກອນນ້ອຍສຸດ(100% ວາງແວດຍະວາງ) --> <div class="row"> <div class="col-sm">1 of 2</div> <div class="col-sm">2 of 2</div> </div> <!-- ສີ່ອັນ: ວາງແວດຍະວາງສິບເຈັດເຖິງຈະຫລາຍຫນັງທີ່ບໍ່ແມ່ນອຸປະກອນນ້ອຍສຸດ(100% ວາງແວດຍະວາງ) --> <div class="row"> <div class="col-sm">1 of 4</div> <div class="col-sm">2 of 4</div> <div class="col-sm">3 of 4</div> <div class="col-sm">4 of 4</div> </div>
ວັນອື່ນຈະສະແດງວ່າແນວໃດທີ່ຈະເພີ່ມສາມາດການແບ່ງສ່ວນອາຍຸດອັນດຽວໃຫ້ອຸປະກອນກາງ.
- ການເບິ່ງຕໍ່ຫລັງນີ້ BS5 Grid XSmall
- ການເບິ່ງຕໍ່ໜ້າໜ້ານີ້ BS5 Grid Medium
