การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Grid System

ใน Bootstrap 5 ระบบ Grid คือเครื่องมือที่ช่วยในการออกแบบ Layout ของหน้าเว็บไซต์อย่างยืดหยุ่นและง่ายดาย โดยใช้การจัดวางองค์ประกอบต่าง ๆ ของหน้าเว็บในรูปแบบแถว (Row) และคอลัมน์ (Column) ทำให้สามารถกำหนดขนาดและการแสดงผลของแต่ละองค์ประกอบตามขนาดหน้าจอที่แตกต่างกันได้ เช่น หน้าจอมือถือ แท็บเล็ต หรือเดสก์ท็อป

โครงสร้างพื้นฐานของ Grid System ใน Bootstrap 5

ระบบ Grid ใน Bootstrap 5 จะใช้การแบ่งหน้าออกเป็น 12 ส่วนเท่ากัน โดยแต่ละคอลัมน์ (Column) จะมีขนาดแตกต่างกันตามที่เรากำหนด ซึ่งสามารถใช้คลาส .container, .row และ .col เพื่อสร้าง Grid ได้ดังนี้

Container

HTML
<div class="container">
  <!-- Content here -->
</div>

คลาส .container จะสร้างพื้นที่สำหรับการจัดวางคอนเทนต์ โดยสามารถใช้ .container-fluid เพื่อให้คอนเทนต์เต็มหน้าจอ

Row

HTML
<div class="container">
  <div class="row">
    <!-- Content here -->
  </div>
</div>

คลาส .row ใช้สำหรับแบ่งส่วนของ Grid เป็นแถว แต่ละแถวจะมีคอลัมน์ย่อย ๆ อยู่ภายใน

Column

HTML
<div class="container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
  </div>
</div>

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

ตัวอย่างการประยุกต์ใช้

กำหนดขนาดคอลัมน์แบบระบุ

HTML
<div class="container">
  <div class="row">
    <div class="col-4">Col-4</div>
    <div class="col-8">Col-8</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์แรกจะกินพื้นที่ 4 ส่วนจาก 12 ส่วน และคอลัมน์ที่สองจะกินพื้นที่ 8 ส่วน

การปรับขนาดตามหน้าจอ

Bootstrap 5 มีระบบ Breakpoint ที่จะช่วยให้คอลัมน์ปรับขนาดตามขนาดหน้าจอ โดยใช้คลาส .col-{breakpoint}-{size} เช่น

HTML
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">Responsive Column</div>
    <div class="col-sm-6 col-md-8 col-lg-9">Responsive Column</div>
  </div>
</div>
  • .col-sm-6 จะแสดงคอลัมน์เป็นครึ่งหน้าจอเมื่ออยู่บนหน้าจอขนาดเล็ก (≥576px)
  • .col-md-4 จะแสดงคอลัมน์เป็น 4 ส่วนเมื่ออยู่บนหน้าจอขนาดกลาง (≥768px)
  • .col-lg-3 จะแสดงคอลัมน์เป็น 3 ส่วนเมื่ออยู่บนหน้าจอขนาดใหญ่ (≥992px)

การใช้ Auto Layout คอลัมน์

หากไม่ระบุขนาดคอลัมน์ใน Grid ระบบจะปรับให้คอลัมน์มีขนาดเท่ากันอัตโนมัติ เช่น

HTML
<div class="container">
  <div class="row">
    <div class="col">Auto Width 1</div>
    <div class="col">Auto Width 2</div>
    <div class="col">Auto Width 3</div>
  </div>
</div>

ในกรณีนี้ คอลัมน์ทั้งหมดจะแบ่งพื้นที่กันอย่างเท่าเทียม

คอลัมน์ Offset และ Order

  • Offset ใช้ในการขยับคอลัมน์ไปทางขวา เช่น
HTML
<div class="container">
  <div class="row">
    <div class="col-4 offset-4">Offset Column</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์จะเริ่มจากตำแหน่งที่ 5 แทนที่จะเป็นตำแหน่งที่ 1

  • Order ใช้ในการเปลี่ยนลำดับการแสดงผลของคอลัมน์ เช่น
HTML
<div class="container">
  <div class="row">
    <div class="col order-3">First</div>
    <div class="col order-2">Second</div>
    <div class="col order-1">Third</div>
  </div>
</div>

ลำดับของคอลัมน์จะสลับกันตามค่าที่กำหนดใน order-{number}

Nested Grid

Bootstrap 5 รองรับการซ้อน Grid ภายในคอลัมน์ได้ ทำให้สามารถจัดการเลย์เอาต์ที่ซับซ้อนได้ง่าย

HTML
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-6">Nested 1</div>
        <div class="col-6">Nested 2</div>
      </div>
    </div>
    <div class="col-6">Main Column</div>
  </div>
</div>

สรุป

การใช้ Grid System ใน Bootstrap 5 ทำให้การออกแบบ Layout เป็นไปได้อย่างยืดหยุ่นและง่ายดาย ไม่ว่าหน้าจอจะมีขนาดใดก็สามารถแสดงผลได้อย่างสวยงาม หากทำความเข้าใจการใช้งานคลาส .container, .row, .col และฟังก์ชันต่าง ๆ เช่น Breakpoint, Offset, Order ก็จะสามารถนำไปประยุกต์ใช้ได้หลากหลายตามความต้องการ

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

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