Bootstrap 5 ຄອບຄີ

Bootstrap 5 ກາງການສະໜາມ

ລະບົບສະໜາມ Bootstrap ໄດ້ສ້າງດ້ວຍ flexbox ແລະບໍ່ສາມາດມີຫຼາຍຫຼາຍກວ່າ 12 ກອງສະໜາມໃນໜ້າວິດີໂອ.

ຖ້າເຈົ້າບໍ່ຕ້ອງກະກຽມຫຼາຍຫຼາຍ 12 ກອງສະໜາມທີ່ມີ ເຈົ້າສາມາດປະສົມກັນກັບຫຼາຍຫຼາຍກັນເພື່ອສ້າງສະໜາມທີ່ຫຼາຍກວ່າ:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

ລະບົບສະໜາມມີຄວາມຕອບສະໜອງຢ່າງໄວວາ ແລະກອງສະໜາມຈະປ່ຽນຕິດຕາມຂະໜາດໜ້າຈໍານວນ.

ການຄອບຄອງຄວາມສຳຫຼວດຢູ່ຫຼາຍຫຼືຫຼາຍຫຼາຍ 12 (ຖ້າບໍ່ຕ້ອງກະກຽມຫຼາຍຫຼາຍ 12 ກອງສະໜາມທີ່ມີ)

ປະເພດສະໜາມ

ລະບົບສະໜາມ Bootstrap 5 ມີປະເພດນຳໃຊ້ຫົກປະເພດ:

  • .col- (ອຸປະກອນນ້ອຍຫຼາຍ - ຄວາມວຸດທິດໜ້າຈໍານວນຕ່ຳກວ່າ 576px)
  • .col-sm- (ອຸປະກອນນ້ອຍ - ຄວາມວຸດທິດໜ້າຈໍານວນ 576px ຫຼາຍກວ່າ)
  • .col-md- (ອຸປະກອນມັດ - ຄວາມວຸດທິດໜ້າຈໍານວນ 768 ຕາມນິວໄຊ)
  • .col-lg- (ອຸປະກອນໃຫຍ່ - ຄວາມວຸດທິດໜ້າຈໍານວນ 992 ຕາມນິວໄຊ)
  • .col-xl- (ອຸປະກອນ xlarge - ຄວາມວຸດທິດໜ້າຈໍານວນ 1200px ຫຼາຍກວ່າ ຫຼື ດຽວກັນ)
  • .col-xxl- (ອຸປະກອນ xxlarge - ຄວາມວຸດທິດໜ້າຈໍານວນ 1400px ຫຼາຍກວ່າ ຫຼື ດຽວກັນ)

ເຈົ້າສາມາດປະສົມພັນທັກຫຍັງທີ່ກ່າວກ່າວນີ້ເພື່ອສ້າງການຈັດການສະໜາມທີ່ມີຄວາມສະໜາມຫຼາຍແລະຫຼາຍກວ່າ.

ຄຳເຕືອນ:ແຕ່ເປັນຫຍັງເຈົ້າຕ້ອງການກະກຽມສະໜາມທີ່ຫຼາຍກວ່າ sm ແລະ md ການກະກຽມຄວາມວຸດທິດດຽວກັນພຽງແຕ່ທີ່ເຈົ້າຈະຕ້ອງການກະກຽມ sm。

ຂໍ້ຄວາມພາບສະໜາມຂອງ Bootstrap 5

ນີ້ແມ່ນຂໍ້ຄວາມພາບສະໜາມຂອງ Bootstrap 5:


<div class="row">
  

  

</div>
<div class="row">
  

  

  

</div>

<div class="row">
  

  

  

</div>

第一个例子：创建一行（<div class="row">）。然后，添加所需数量的列（带有合适的 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表数字，每行加起来应为 12。

第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，以创建等宽的列：两个 "col" 元素 = 每个 col 为 50% 宽度，而三个 cols = 每个 col 为 33.33% 宽度。四个列 = 25% 宽度，等等。您还可以使用 .col-sm|md|lg|xl|xxl 使列获得响应性。

下面我们整理了一些基本的 Bootstrap 5 网格布局的例子。

三等分列

下例显示如何在所有设备和屏幕宽度上创建三个等宽列：

ຕົວຢ່າງ

<div class="row">
  
.col

  
.col

  
.col

</div>

ທົດລອງດຽວວຽນເອງ

响应式列

下例显示了如何从平板电脑开始创建四个等宽的列，然后扩展到超大桌面。在宽度小于 576px 的手机或屏幕上，列会自动堆叠在一起：

ຕົວຢ່າງ

<div class="row">
  
.col-sm-3

  
.col-sm-3

  
.col-sm-3

  
.col-sm-3

</div>

ທົດລອງດຽວວຽນເອງ

两个不等的响应式列

下例显示了如何在平板电脑得到两个不同宽度的列并扩展到超大型桌面：

ຕົວຢ່າງ

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

ທົດລອງດຽວວຽນເອງ

ຄຳເຕືອນ:ເຈົ້າຈະຮຽນຂໍ້ມູນກ່ຽວກັບຫຼັງຈາກນີ້. ລະບົບການຈັດສະບາຍ ຂອງຂໍ້ມູນຫຼາຍກວ່າ.