การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Grid กับหน้าจอ Extra Extra Large (XXL)

ระบบ Grid ใน Bootstrap 5 ใช้คอลัมน์ (Columns) เป็นส่วนประกอบหลัก ซึ่งถูกจัดเรียงในแถว (Rows) และกรอบงานนี้จะถูกจัดวางภายในคอนเทนเนอร์ (Container) ระบบ Grid ของ Bootstrap แบ่งออกเป็น 12 คอลัมน์ ซึ่งผู้ใช้สามารถกำหนดจำนวนคอลัมน์ที่ต้องการใช้ได้ตามที่เหมาะสม

โดยการใช้งาน Grid สำหรับหน้าจอขนาดต่าง ๆ รวมถึงขนาด XXL เราสามารถใช้ตัวระบุขนาดหน้าจอแบบเฉพาะเจาะจงได้ เช่น:

  • col-xxl-* สำหรับหน้าจอขนาด XXL (≥1400px)
  • col-xl-* สำหรับหน้าจอขนาด XL (≥1200px)
  • col-lg-* สำหรับหน้าจอขนาด Large (≥992px)
  • col-md-* สำหรับหน้าจอขนาด Medium (≥768px)
  • col-sm-* สำหรับหน้าจอขนาด Small (≥576px)

ตัวอย่างการใช้งาน Grid กับหน้าจอ XXL

ต่อไปนี้คือตัวอย่างการใช้งาน Grid แบบต่าง ๆ กับหน้าจอขนาด XXL

การแบ่งคอลัมน์แบบสมดุล

การแบ่งคอลัมน์อย่างง่ายโดยแบ่งพื้นที่ให้แต่ละคอลัมน์อย่างสมดุลกัน โดยใช้ col-xxl และกำหนดให้แต่ละคอลัมน์ใช้พื้นที่ที่เท่ากัน

HTML
<div class="container">
  <div class="row">
    <div class="col-xxl-4">คอลัมน์ที่ 1</div>
    <div class="col-xxl-4">คอลัมน์ที่ 2</div>
    <div class="col-xxl-4">คอลัมน์ที่ 3</div>
  </div>
</div>

ในตัวอย่างนี้ เราแบ่งคอลัมน์ออกเป็น 3 คอลัมน์ โดยแต่ละคอลัมน์มีขนาด 4 ส่วนจากทั้งหมด 12 ส่วนของระบบ Grid

การแบ่งคอลัมน์แบบไม่สมดุล

เราสามารถกำหนดขนาดของคอลัมน์แต่ละคอลัมน์ได้อย่างยืดหยุ่นตามความต้องการ โดยการใช้คลาส col-xxl-* เพื่อระบุจำนวนส่วนที่แต่ละคอลัมน์จะใช้

HTML
<div class="container">
  <div class="row">
    <div class="col-xxl-3">คอลัมน์ที่ 1</div>
    <div class="col-xxl-6">คอลัมน์ที่ 2</div>
    <div class="col-xxl-3">คอลัมน์ที่ 3</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์ที่ 1 และคอลัมน์ที่ 3 มีขนาด 3 ส่วน ในขณะที่คอลัมน์ที่ 2 มีขนาด 6 ส่วน

การซ้อนกันของคอลัมน์ (Nesting Columns)

หากต้องการสร้างระบบ Grid ซ้อนกันภายในคอลัมน์ เราสามารถทำได้โดยวางแถวและคอลัมน์ใหม่ภายในคอลัมน์ที่มีอยู่แล้ว

HTML
<div class="container">
  <div class="row">
    <div class="col-xxl-8">
      คอลัมน์ที่ 1
      <div class="row">
        <div class="col-xxl-6">คอลัมน์ซ้อน 1</div>
        <div class="col-xxl-6">คอลัมน์ซ้อน 2</div>
      </div>
    </div>
    <div class="col-xxl-4">คอลัมน์ที่ 2</div>
  </div>
</div>

ในตัวอย่างนี้ เราสร้างคอลัมน์ขนาด 8 ส่วนและใส่ระบบ Grid ซ้อนข้างใน โดยมีคอลัมน์ย่อยขนาด 6 ส่วน 2 คอลัมน์

การจัดเรียงคอลัมน์ (Reordering Columns)

ระบบ Grid ของ Bootstrap 5 รองรับการจัดเรียงลำดับของคอลัมน์ โดยเราสามารถใช้คลาส order-xxl-* เพื่อจัดลำดับคอลัมน์

HTML
<div class="container">
  <div class="row">
    <div class="col-xxl-4 order-xxl-3">คอลัมน์ที่ 1</div>
    <div class="col-xxl-4 order-xxl-1">คอลัมน์ที่ 2</div>
    <div class="col-xxl-4 order-xxl-2">คอลัมน์ที่ 3</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์ที่ 2 จะถูกแสดงเป็นลำดับแรกตามที่เรากำหนดไว้ด้วย order-xxl-1 และคอลัมน์ที่ 1 จะถูกแสดงเป็นลำดับสุดท้าย

การซ่อนและแสดงคอลัมน์ตามขนาดหน้าจอ

เราสามารถควบคุมการแสดงผลของคอลัมน์ให้เหมาะสมกับขนาดหน้าจอได้ด้วยคลาส d-xxl-none เพื่อซ่อนคอลัมน์ในหน้าจอขนาด XXL และคลาส d-xxl-block เพื่อแสดงคอลัมน์

HTML
<div class="container">
  <div class="row">
    <div class="col-xxl-6 d-none d-xxl-block">แสดงเฉพาะหน้าจอ XXL</div>
    <div class="col-xxl-6">แสดงทุกหน้าจอ</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์แรกจะถูกซ่อนในทุกหน้าจอ ยกเว้นหน้าจอขนาด XXL ขึ้นไป

ผลลัพธ์บนหน้าจอขนาด XXL

ผลลัพธ์บนหน้าจอขนาดเล็กกว่า XXL

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ