ການໃຊ້ສາຍລາຍ Bootstrap 5

ພວກເຮົາໄດ້ຄົ້ນພົບບັນດາຄວາມທີ່ພົບພິມຂອງ Bootstrap 5 Grid Layout.

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

ການໃຊ້ຈຳນວນຫຼາຍຫຼາຍຫຼາຍຫຼາຍ .col ການໃຊ້ນັກບໍ່ອອກຂອງວັດຖຸ ເພື່ອຄວບຄຸມວ່າຂະໜາດຂອບເຂດຄົງກັນ. ໃນຄວາມຈຳນວນໃນລາຍການດັ່ງກ່າວນັ້ນພວກເຮົາໃຊ້ col ສາມບ່ອນທີ່ຈຳນວນຂະໜາດກັນຫຼາຍຫຼາຍ 33.33%.

ຕົວຢ່າງ

<div class="row">
  
col

  
col

  
col

</div>

ສອບທັບອາດດຽວ

ສາມບ່ອນບໍ່ເທົ່າກັນສະເພາະຈຳນວນ

ທ່ານຍັງສາມາດໃຊ້ຈຳນວນເພື່ອຄວບຄຸມວ່າຂະໜາດຂອບເຂດ. <br>ພຽງແຕ່ຮັບປະກັນວ່າລວມຢູ່ 12 (ບໍ່ຕ້ອງໃຊ້ຂອບເຂດທັງ 12 ບ່ອນ):

ຕົວຢ່າງ

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

ສອບທັບອາດດຽວ

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

ທ່ານຈະສາມາດກໍ່ຕັ້ງຂອບເຂດບໍ່ເທົ່າກັນສະນັ້ນທ່ານຈະຕ້ອງໃຊ້ຈຳນວນ. <br>ວິຊາຈຳນວນນັ້ນຈະກໍ່ຕັ້ງຂອບເຂດ 25%/50%/25%<br>ຂອບເຂດບໍ່ເທົ່າກັນສາມບ່ອນ

ຕົວຢ່າງ

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

ສອບທັບອາດດຽວ

ການກະກຽມວ່າຂະໜາດຂອບເຂດ

ວ່ານັ້ນຈະພຽງແຕ່ການກະກຽມວ່າຂະໜາດຂອບເຂດດຽວເພື່ອດັບທີ່ຫຼາຍຫຼາຍນັ້ນພຽງແຕ່ຂອບເຂດບໍ່ຫຼາຍຫຼາຍນັ້ນຈະການດັດແປງຂະໜາດບໍ່ຫຼາຍຫຼາຍບໍ່ຫຼາຍຫຼາຍນັ້ນ: 25%/50%/25%<br>ການກະກຽມວ່າຂະໜາດຂອບເຂດ

ຕົວຢ່າງ

<div class="row">
  
col

  <div class="col-6">col-6</div>
  
col

</div>

ສອບທັບອາດດຽວ

ຂອບເຂດຫຼາຍບ່ອນບໍ່ເທົ່າກັນ

ຕົວຢ່າງ

ຂອບເຂດສອງບ່ອນບໍ່ເທົ່າກັນ
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
ຂອບເຂດສີ່ບ່ອນບໍ່ເທົ່າກັນ
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  
3 of 4

  
4 of 4

</div>
ຂອບເຂດຫົກບ່ອນບໍ່ເທົ່າກັນ
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

ສອບທັບອາດດຽວ

Row Cols

ທ່ານຍັງສາມາດໃຊ້ .row-cols-* ການຄວບຄຸມສະຖານທີ່ຕັ້ງຢູ່ບ່ອນທີ່ບໍ່ຄິດຄົງຂອງບ່ອນບໍ່ຫຼາຍຫຼາຍຫຼາຍ(ບໍ່ກ່ຽວວ່າຈະມີຫຼາຍບ່ອນບໍ່ຫຼາຍຫຼາຍ):

ຕົວຢ່າງ

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  
3 of 4

  
4 of 4

</div>
<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

ສອບທັບອາດດຽວ

ຂອບເຂດຫຼາຍບ່ອນບໍ່ເທົ່າກັນ

ຕົວຢ່າງ

ຂອບເຂດສອງບ່ອນບໍ່ເທົ່າກັນ
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<div class="row">
  
1 of 4

  
2 of 4

  
3 of 4

  
4 of 4

</div>

<div class="row">
  
1 of 4

  
2 of 4

  
3 of 4

  
4 of 4

</div>

ສອບທັບອາດດຽວ

等高

如果一列比另一列高（由于文本或 CSS 高度），其余的将跟随：

ຕົວຢ່າງ

<div class="row">
  
Lorem ipsum...

  
col

  
col

</div>

ສອບທັບອາດດຽວ

嵌套的列

下例展示了如何创建两列布局，其中一列内有另外两列：

ຕົວຢ່າງ

<div class="row">
  

    .col-8
    <div class="row">
      
.col-6

      
.col-6

    </div>
  </div>
  
.col-4

</div>

ສອບທັບອາດດຽວ

响应类

Bootstrap 5 网格系统有五个类：

  • .col- (超小型设备 - 屏幕宽度小于 576px)
  • .col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
  • .col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)
  • .col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素)
  • .col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px)
  • .col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)

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

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

ລວມມືອາກາດສະໜາມ

ຄວາມອອກສະແດງນີ້ສະແດງວ່າບັນດາການສ້າງຖານອາງອອກອາກາດສະໜາມທີ່ທີ່ເລີ່ມຈາກອຸປະກອນນ້ອຍສະໜາມຫຼັງຈາກນັ້ນກໍ່ຈະປ່ຽນເປັນຖານອາກາດສະໜາມລະດັບຫຼັກຂອງອຸປະກອນສະໜາມ(sm, md, lg ແລະ xl):

ຕົວຢ່າງ

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

ສອບທັບອາດດຽວ

Mix and Match

ຕົວຢ່າງ

<!-- ໃນອຸປະກອນນ້ອຍຫຼັງ 50%/50% ກວດສອບ, ໃນອຸປະກອນໃຫຍ່ 75%/25% ກວດສອບ. -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- ໃນອຸປະກອນນ້ອຍຫຼັງ, ອຸປະກອນນ້ອຍ, ແລະອຸປະກອນມາກາດ 58%/42% ກວດສອບ, ໃນອຸປະກອນໃຫຍ່ແລະອຸປະກອນວຽນວຽງ 66.3%/33.3% ກວດສອບ. -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- ໃນອຸປະກອນນ້ອຍ 25%/75% ກວດສອບ, ໃນອຸປະກອນມາກາດ 50%/50% ກວດສອບ, ໃນອຸປະກອນໃຫຍ່ແລະອຸປະກອນວຽນວຽງ 33%/66% ກວດສອບ. ໃນອຸປະກອນນ້ອຍຫຼັງ, ຈະຖືກຈັດສອງກັບອັນສັດ (100%). -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

ສອບທັບອາດດຽວ

ບໍ່ມີ gutter

ສຳລັບການປ່ຽນການລະຫວ່າງສາຍ (ອາກາດນອກ), ກະລຸນາໃຊ້ .g-1|2|3|4|5 ພາສານຂອງ.g-4 ເປັນຄວາມຈຳນວນສົມບູນ).

ສຳລັບການລຶບການຈັດສັນກະດີ (gutter) ທີ່ບໍ່ມີ, ກະລຸນາໃຊ້ .g-0：

ຕົວຢ່າງ

<div class="row g-0">

ສອບທັບອາດດຽວ