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

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

ໃນຕົວຢ່າງເຫຼົ່ານີ້ .themed-grid-colຫ້ອງຮຽນຖືກເພີ່ມໃສ່ຖັນເພື່ອເພີ່ມຫົວຂໍ້ບາງຢ່າງ. ນີ້ບໍ່ແມ່ນຫ້ອງຮຽນທີ່ມີຢູ່ໃນ Bootstrap ໂດຍຄ່າເລີ່ມຕົ້ນ.

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

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

ສາມຖັນເທົ່າກັບທາງເລືອກ

ໂດຍການນໍາໃຊ້ .row-cols-*ຫ້ອງຮຽນ, ທ່ານສາມາດສ້າງຕາຂ່າຍໄຟຟ້າທີ່ມີຖັນເທົ່າທຽມກັນ.

.colລູກຂອງ .row-cols-md-3

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

ເອົາສາມຖັນ ເລີ່ມຕົ້ນຈາກເດັສທັອບ ແລະປັບຂະໜາດໄປຫາເດັສທັອບຂະໜາດໃຫຍ່ ທີ່ມີຄວາມກວ້າງຕ່າງໆ. ຈືຂໍ້ມູນການ, ຖັນຕາຂ່າຍໄຟຟ້າຄວນເພີ່ມເຖິງສິບສອງສໍາລັບຕັນແນວນອນດຽວ. ຫຼາຍກວ່ານັ້ນ, ແລະຖັນເລີ່ມຕົ້ນ 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-4

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

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

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

.col-md-8

.col-6 .col-md-4

.col-6

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

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Gutters

ດ້ວຍ .gx-*ຫ້ອງຮຽນ, gutters ຕາມແນວນອນສາມາດປັບໄດ້.

.colມີ .gx-4gutters

ໃຊ້ .gy-*ຫ້ອງຮຽນເພື່ອຄວບຄຸມທໍ່ຕັ້ງ.

.colມີ .gy-4gutters

ດ້ວຍ .g-*ຫ້ອງຮຽນ, gutters ໃນທັງສອງທິດທາງສາມາດປັບໄດ້.

.colມີ .g-3gutters

ບັນຈຸ

ຫ້ອງຮຽນເພີ່ມເຕີມທີ່ເພີ່ມເຂົ້າໃນ Bootstrap v4.4 ອະນຸຍາດໃຫ້ບັນຈຸທີ່ກວ້າງ 100% ຈົນກ່ວາຈຸດແບ່ງສະເພາະ. v5 ເພີ່ມຈຸດແບ່ງໃໝ່ xxl.

.ບັນຈຸ

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid