ຕົວຢ່າງຕາຕະລາງ Bootstrap

ການຈັດວາງຕາຂ່າຍພື້ນຖານເພື່ອໃຫ້ເຈົ້າຄຸ້ນເຄີຍກັບການສ້າງພາຍໃນລະບົບຕາຂ່າຍ Bootstrap.

ຫ້າຊັ້ນຕາຂ່າຍ

ມີຫ້າຊັ້ນຂອງລະບົບຕາຂ່າຍ Bootstrap, ຫນຶ່ງສໍາລັບແຕ່ລະອຸປະກອນທີ່ພວກເຮົາສະຫນັບສະຫນູນ. ແຕ່ລະຊັ້ນເລີ່ມຕົ້ນດ້ວຍຂະໜາດຊ່ອງເບິ່ງຕ່ຳສຸດ ແລະນຳໃຊ້ກັບອຸປະກອນທີ່ໃຫຍ່ກວ່າໂດຍອັດຕະໂນມັດ ເວັ້ນເສຍແຕ່ຈະ overridden.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

ສາມຖັນເທົ່າກັນ

ເອົາສາມຖັນທີ່ມີຄວາມກວ້າງເທົ່າກັນ ເລີ່ມຈາກເດັສທັອບ ແລະປັບຂະໜາດເປັນເດັສທັອບຂະໜາດໃຫຍ່ . ໃນອຸປະກອນມືຖື, ແທັບເລັດແລະຂ້າງລຸ່ມນີ້, ຖັນຈະ stack ອັດຕະໂນມັດ.

.col-md-4
.col-md-4
.col-md-4

ສາມຖັນບໍ່ເທົ່າກັນ

ເອົາສາມຖັນ ເລີ່ມຕົ້ນຈາກເດັສທັອບ ແລະປັບຂະໜາດໄປຫາເດັສທັອບຂະໜາດໃຫຍ່ ທີ່ມີຄວາມກວ້າງຕ່າງໆ. ຈືຂໍ້ມູນການ, ຖັນຕາຂ່າຍໄຟຟ້າຄວນເພີ່ມເຖິງສິບສອງສໍາລັບຕັນແນວນອນດຽວ. ຫຼາຍກວ່ານັ້ນ, ແລະຖັນເລີ່ມຕົ້ນ stacking ບໍ່ວ່າ viewport ໄດ້.

.col-md-3
.col-md-6
.col-md-3

ສອງຖັນ

ເອົາສອງຖັນ ເລີ່ມຈາກເດັສທັອບ ແລະປັບຂະໜາດເປັນເດັສທັອບຂະໜາດໃຫຍ່ .

.col-md-8
.col-md-4

ຄວາມກວ້າງເຕັມ, ຖັນດຽວ

ບໍ່ມີຫ້ອງຮຽນຕາຕະລາງແມ່ນມີຄວາມຈໍາເປັນສໍາລັບອົງປະກອບເຕັມຄວາມກວ້າງ.


ສອງຖັນທີ່ມີສອງຖັນຊ້ອນກັນ

ຕາມເອກະສານ, ການສ້າງຮັງແມ່ນງ່າຍ - ພຽງແຕ່ໃສ່ແຖວແຖວຢູ່ໃນຖັນທີ່ມີຢູ່ແລ້ວ. ນີ້ເຮັດໃຫ້ທ່ານມີສອງຄໍລໍາ ເລີ່ມຕົ້ນຈາກ desktops ແລະຂະຫນາດໄປຫາ desktops ຂະຫນາດໃຫຍ່ , ກັບອີກສອງຖັນ (ຄວາມກວ້າງເທົ່າທຽມກັນ) ພາຍໃນຖັນໃຫຍ່.

ໃນຂະຫນາດອຸປະກອນມືຖື, ແທັບເລັດແລະລົງ, ຖັນເຫຼົ່ານີ້ແລະຖັນທີ່ຊ້ອນກັນຂອງພວກມັນຈະ stack.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

ປະສົມກັນ: ມືຖື ແລະເດັສທັອບ

ລະບົບຕາຕະລາງ Bootstrap v4 ມີຫ້າຊັ້ນຂອງຊັ້ນຮຽນ: xs (ຂະຫນາດນ້ອຍພິເສດ), sm (ຂະຫນາດນ້ອຍ), md (ຂະຫນາດກາງ), lg (ຂະຫນາດໃຫຍ່), ແລະ xl (ຂະຫນາດໃຫຍ່ພິເສດ). ທ່ານ​ສາ​ມາດ​ນໍາ​ໃຊ້​ເກືອບ​ທຸກ​ປະ​ສົມ​ຂອງ​ຫ້ອງ​ຮຽນ​ເຫຼົ່າ​ນີ້​ເພື່ອ​ສ້າງ​ຮູບ​ແບບ​ເຄື່ອນ​ໄຫວ​ແລະ​ປ່ຽນ​ແປງ​ໄດ້​ຫຼາຍ​ຂຶ້ນ​.

ແຕ່ລະຊັ້ນຮຽນເພີ່ມຂຶ້ນ, ຊຶ່ງຫມາຍຄວາມວ່າຖ້າທ່ານວາງແຜນທີ່ຈະກໍານົດຄວາມກວ້າງດຽວກັນສໍາລັບ xs ແລະ sm, ທ່ານພຽງແຕ່ຕ້ອງການລະບຸ xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

ປະສົມກັນ: ມືຖື, ແທັບເລັດ, ແລະເດັສທັອບ

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4