ຕົວຢ່າງຕາຕະລາງ Bootstrap
ການຈັດວາງຕາຂ່າຍພື້ນຖານເພື່ອໃຫ້ເຈົ້າຄຸ້ນເຄີຍກັບການສ້າງພາຍໃນລະບົບຕາຂ່າຍ Bootstrap.
ໃນຕົວຢ່າງເຫຼົ່ານີ້ .themed-grid-col
ຫ້ອງຮຽນຖືກເພີ່ມໃສ່ຖັນເພື່ອເພີ່ມຫົວຂໍ້ບາງຢ່າງ. ນີ້ບໍ່ແມ່ນຫ້ອງຮຽນທີ່ມີຢູ່ໃນ Bootstrap ໂດຍຄ່າເລີ່ມຕົ້ນ.
ຫ້າຊັ້ນຕາຂ່າຍ
ມີຫ້າຊັ້ນຂອງລະບົບຕາຂ່າຍ Bootstrap, ຫນຶ່ງສໍາລັບແຕ່ລະອຸປະກອນທີ່ພວກເຮົາສະຫນັບສະຫນູນ. ແຕ່ລະຊັ້ນເລີ່ມຕົ້ນດ້ວຍຂະໜາດຊ່ອງເບິ່ງຕ່ຳສຸດ ແລະ ນຳໃຊ້ກັບອຸປະກອນທີ່ໃຫຍ່ກວ່າໂດຍອັດຕະໂນມັດ ເວັ້ນເສຍແຕ່ຈະ overridden.
ສາມຖັນເທົ່າກັນ
ເອົາສາມຖັນຄວາມກວ້າງເທົ່າກັນ ເລີ່ມຈາກເດັສທັອບ ແລະປັບຂະໜາດເປັນເດັສທັອບຂະໜາດໃຫຍ່ . ໃນອຸປະກອນມືຖື, ແທັບເລັດແລະຂ້າງລຸ່ມນີ້, ຖັນຈະ stack ອັດຕະໂນມັດ.
ສາມຖັນເທົ່າກັບທາງເລືອກ
ໂດຍການນໍາໃຊ້ .row-cols-*
ຫ້ອງຮຽນ, ທ່ານສາມາດສ້າງຕາຂ່າຍໄຟຟ້າທີ່ມີຖັນເທົ່າທຽມກັນ.
.col
ລູກຂອງ
.row-cols-md-3
.col
ລູກຂອງ
.row-cols-md-3
.col
ລູກຂອງ
.row-cols-md-3
ສາມຖັນບໍ່ເທົ່າກັນ
ເອົາສາມຖັນ ເລີ່ມຕົ້ນຈາກເດັສທັອບ ແລະປັບຂະໜາດໄປຫາເດັສທັອບຂະໜາດໃຫຍ່ ທີ່ມີຄວາມກວ້າງຕ່າງໆ. ຈືຂໍ້ມູນການ, ຖັນຕາຂ່າຍໄຟຟ້າຄວນເພີ່ມເຖິງສິບສອງສໍາລັບຕັນແນວນອນດຽວ. ຫຼາຍກວ່ານັ້ນ, ແລະຖັນເລີ່ມຕົ້ນ stacking ບໍ່ວ່າ viewport ໄດ້.
ສອງຖັນ
ເອົາສອງຖັນ ເລີ່ມຈາກເດັສທັອບ ແລະປັບຂະໜາດເປັນເດັສທັອບຂະໜາດໃຫຍ່ .
ຄວາມກວ້າງເຕັມ, ຖັນດຽວ
ບໍ່ມີຫ້ອງຮຽນຕາຕະລາງແມ່ນມີຄວາມຈໍາເປັນສໍາລັບອົງປະກອບເຕັມຄວາມກວ້າງ.
ສອງຖັນທີ່ມີສອງຖັນຊ້ອນກັນ
ຕາມເອກະສານ, ການສ້າງຮັງແມ່ນງ່າຍ - ພຽງແຕ່ໃສ່ແຖວແຖວຢູ່ໃນຖັນທີ່ມີຢູ່ແລ້ວ. ນີ້ເຮັດໃຫ້ທ່ານມີສອງຄໍລໍາ ເລີ່ມຕົ້ນຈາກ desktops ແລະຂະຫນາດໄປຫາ desktops ຂະຫນາດໃຫຍ່ , ກັບອີກສອງຖັນ (ຄວາມກວ້າງເທົ່າທຽມກັນ) ພາຍໃນຖັນໃຫຍ່.
ໃນຂະຫນາດອຸປະກອນມືຖື, ແທັບເລັດແລະລົງ, ຖັນເຫຼົ່ານີ້ແລະຖັນທີ່ຊ້ອນກັນຂອງພວກມັນຈະ stack.
ປະສົມກັນ: ມືຖື ແລະເດັສທັອບ
ລະບົບຕາຂ່າຍ Bootstrap v4 ມີຫ້າຊັ້ນຂອງຊັ້ນຮຽນ: xs (ຂະຫນາດນ້ອຍພິເສດ, infix ຫ້ອງຮຽນນີ້ບໍ່ໄດ້ໃຊ້), sm (ນ້ອຍ), md (ຂະຫນາດກາງ), lg (ຂະຫນາດໃຫຍ່), ແລະ xl (ຂະຫນາດໃຫຍ່ພິເສດ). ທ່ານສາມາດນໍາໃຊ້ເກືອບທຸກປະສົມຂອງຫ້ອງຮຽນເຫຼົ່ານີ້ເພື່ອສ້າງຮູບແບບເຄື່ອນໄຫວແລະປ່ຽນແປງໄດ້ຫຼາຍຂຶ້ນ.
ແຕ່ລະຊັ້ນຮຽນເພີ່ມຂຶ້ນ, ຊຶ່ງຫມາຍຄວາມວ່າຖ້າທ່ານວາງແຜນທີ່ຈະກໍານົດຄວາມກວ້າງດຽວກັນສໍາລັບ md, lg ແລະ xl, ທ່ານພຽງແຕ່ຕ້ອງການລະບຸ md.
ປະສົມກັນ: ມືຖື, ແທັບເລັດ, ແລະເດັສທັອບ
Gutters
ດ້ວຍ .gx-*
ຫ້ອງຮຽນ, gutters ຕາມແນວນອນສາມາດປັບໄດ້.
.col
ມີ
.gx-4
gutters
.col
ມີ
.gx-4
gutters
.col
ມີ
.gx-4
gutters
.col
ມີ
.gx-4
gutters
.col
ມີ
.gx-4
gutters
.col
ມີ
.gx-4
gutters
ໃຊ້ .gy-*
ຫ້ອງຮຽນເພື່ອຄວບຄຸມທໍ່ຕັ້ງ.
.col
ມີ
.gy-4
gutters
.col
ມີ
.gy-4
gutters
.col
ມີ
.gy-4
gutters
.col
ມີ
.gy-4
gutters
.col
ມີ
.gy-4
gutters
.col
ມີ
.gy-4
gutters
ດ້ວຍ .g-*
ຫ້ອງຮຽນ, gutters ໃນທັງສອງທິດທາງສາມາດປັບໄດ້.
.col
ມີ
.g-3
gutters
.col
ມີ
.g-3
gutters
.col
ມີ
.g-3
gutters
.col
ມີ
.g-3
gutters
.col
ມີ
.g-3
gutters
.col
ມີ
.g-3
gutters
ບັນຈຸ
ຫ້ອງຮຽນເພີ່ມເຕີມທີ່ເພີ່ມເຂົ້າໃນ Bootstrap v4.4 ອະນຸຍາດໃຫ້ບັນຈຸທີ່ກວ້າງ 100% ຈົນກ່ວາຈຸດແບ່ງສະເພາະ. v5 ເພີ່ມຈຸດແບ່ງໃໝ່ xxl
.