Bootstrap 5 ตัวอย่างกริด

ด้านล่างเราได้รวบรวมตัวอย่าง Bootstrap 5 Grid Layout หลายตัวอย่าง

สามคอลัมน์ที่เท่ากัน

ใช้บนอิเล็มน์ที่เท่ากันจำนวนที่กำหนด .col คลาส，Bootstrap จะตรวจสอบว่ามีอิเล็มน์กี่อัน (และสร้างคอลัมน์ที่มีความกว้างเท่ากัน) ในตัวอย่างดังนี้ คุณใช้ col สามอัน โดยแต่ละอันมีความกว้าง 33.33%:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

สามคอลัมน์ที่เท่ากันโดยใช้ตัวเลข

คุณยังสามารถใช้ตัวเลขเพื่อควบคุมความกว้างของคอลัมน์ แต่ต้องให้รวมค่าเท่ากับหรือน้อยกว่า 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>

ทดลองด้วยตัวเอง

สามคอลัมน์ที่ไม่เท่ากัน

ถ้าต้องการสร้างคอลัมน์ที่ไม่เท่ากัน คุณจะต้องใช้ตัวเลข ตัวอย่างดังนี้จะสร้างการแบ่งเป็น 25%/50%/25%:

ตัวอย่าง

<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%:

ตัวอย่าง

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</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>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</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>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</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>
<!-- Four unequal columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

ทดลองด้วยตัวเอง

ความสูงเท่ากัน

ถ้าคอลัมน์หนึ่งสูงกว่าคอลัมน์อื่น (เนื่องจากข้อความหรือความสูง CSS) คอลัมน์ที่เหลือจะตามต้น:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

คอลัมน์ที่ฝังภายใน

ตัวอย่างด้านล่างนี้แสดงวิธีการสร้างแบบต้นตารางสองคอลัมน์ ที่มีคอลัมน์อื่นถูกฝังภายในคอลัมน์หลัก:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

คลาสตอบสนอง

ระบบเครื่องมือตาราง Bootstrap 5 มีห้าคลาส:

  • .col- (เครื่องคอมพิวเตอร์ขนาดย่อม - ความกว้างหน้าจอต่ำกว่า 576px)
  • .col-sm- (เครื่องคอมพิวเตอร์ขนาดเล็ก - ความกว้างหน้าจอเท่ากับหรือใหญ่กว่า 576px)
  • .col-md- (เครื่องคอมพิวเตอร์ขนาดกลาง - ความกว้างหน้าจอเท่ากับหรือใหญ่กว่า 768 พิกเซล)
  • .col-lg- (เครื่องคอมพิวเตอร์ขนาดใหญ่ - ความกว้างหน้าจอเท่ากับหรือใหญ่กว่า 992 พิกเซล)
  • .col-xl- (เครื่องคอมพิวเตอร์ขนาดใหญ่ - ความกว้างหน้าจอเท่ากับหรือใหญ่กว่า 1200px)
  • .col-xxl- (เครื่องคอมพิวเตอร์ขนาดใหญ่ - ความกว้างหน้าจอเท่ากับหรือใหญ่กว่า 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 และ 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">

ทดลองด้วยตัวเอง