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

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

ໃນຕົວຢ່າງເຫຼົ່ານີ້ .themed-grid-colຫ້ອງຮຽນຖືກເພີ່ມໃສ່ຖັນເພື່ອເພີ່ມຫົວຂໍ້ບາງຢ່າງ. ນີ້ບໍ່ແມ່ນຫ້ອງຮຽນທີ່ມີຢູ່ໃນ 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
.col-xxl-4
.col-xxl-4
.col-xxl-4

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

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

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

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

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

.colລູກຂອງ .row-cols-md-3
.colລູກຂອງ .row-cols-md-3
.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-6
.col-md-4

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

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

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

.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-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

Gutters

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

.colມີ .gx-4gutters
.colມີ .gx-4gutters
.colມີ .gx-4gutters
.colມີ .gx-4gutters
.colມີ .gx-4gutters
.colມີ .gx-4gutters

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

.colມີ .gy-4gutters
.colມີ .gy-4gutters
.colມີ .gy-4gutters
.colມີ .gy-4gutters
.colມີ .gy-4gutters
.colມີ .gy-4gutters

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

.colມີ .g-3gutters
.colມີ .g-3gutters
.colມີ .g-3gutters
.colມີ .g-3gutters
.colມີ .g-3gutters
.colມີ .g-3gutters

ບັນຈຸ

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

.ບັນຈຸ
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid