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 class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- หรือให้ Bootstrap จัดการกับการจัดระเบียบอัตโนมัติ -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

ตัวอย่างที่หนึ่ง: สร้างแถว (<div class="row">) แล้ว แสดงคอลัมน์ที่ต้องการ (โดยมี class ที่เหมาะสม) .col-*-* แบร์แคร์ (class) อันแรก (*) แสดงความตอบสนอง: sm, md, lg, xl หรือ xxl และแบร์แคร์ (star) อันที่สอง แสดงเลข ซึ่งความรวมของแต่ละแถวควรเป็น 12

ตัวอย่างที่สอง: ไม่ต้องใส่เลขให้แต่ละ col เพิ่มเลข แต่ให้ bootstrap จัดการกับการจัดระเบียบเพื่อที่จะสร้างคอลัมน์ที่มีความกว้างเท่าๆกัน: สอง "col" ตัวแทน = แต่ละ col มีความกว้าง 50% และสาม cols = แต่ละ col มีความกว้าง 33.33% สี่คอลัมน์ = 25% และอื่นๆ คุณยังสามารถใช้ .col-sm|md|lg|xl|xxl ทำให้คอลัมน์มีความตอบสนอง

เราได้รวบรวมตัวอย่างของระบบกริด Bootstrap 5 พื้นฐานบางตัวขึ้นมา

คอลัมน์ที่แบ่งเท่าๆกัน

ตัวอย่างนี้แสดงว่าจะเป็นไรถ้าสร้างคอลัมน์สามที่มีความกว้างเท่ากันบนเครื่องและความกว้างของหน้าจอทุกๆอุปกรณ์

ตัวอย่าง

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

ทดลองเอง

คอลัมน์ที่มีความตอบสนอง

ตัวอย่างนี้แสดงว่าจะเป็นไรถ้าเริ่มที่ตั้งโต๊ะตั้งโต๊ะเมื่อเริ่มที่มีคอลัมน์สี่ และขนาดใหญ่ที่สุดของโต๊ะบนมือถือหรือหน้าจอที่ความกว้างต่ำกว่า 576px คอลัมน์จะถูกจัดเก็บรวมกันโดยอัตโนมัติ:

ตัวอย่าง

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

ทดลองเอง

คอลัมน์ที่มีความกว้างที่ต่างกัน

ตัวอย่างนี้แสดงว่าจะเป็นไรถ้ามีสองคอลัมน์ที่มีความกว้างต่างกันบนเครื่องคอมพิวเตอร์ตั้งโต๊ะซึ่งขนาดใหญ่ที่สุด และขนาดใหญ่ที่สุดของโต๊ะ

ตัวอย่าง

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

ทดลองเอง

คำแนะนำ:คุณจะเรียนรู้เกี่ยวกับเรื่องนี้ในช่วงหลังของคู่มือนี้ ระบบกริด เนื้อหาเพิ่มเติม