สอนใช้งาน Bootstrap 4

Bootstrap 4 Grid System

Bootstrap 4 เป็น Framework สำหรับการพัฒนาเว็บที่ช่วยให้การสร้าง Layout เป็นเรื่องง่ายผ่านระบบ Grid System ซึ่งเป็นเครื่องมือในการจัดโครงสร้างของหน้าเว็บให้เข้ากับอุปกรณ์ที่มีขนาดหน้าจอต่างกัน โดย Grid System จะช่วยให้หน้าเว็บของเราดูดีและเป็นระเบียบมากขึ้น โดยรองรับการออกแบบแบบ Responsive

แนวคิดพื้นฐานของ Grid System ใน Bootstrap 4

  • Grid ใน Bootstrap แบ่งหน้าเว็บออกเป็น 12 คอลัมน์ (Columns)
  • โครงสร้างจะอยู่ในรูปแบบ 3 ชั้น: Container > Row > Column
    • Container: เป็นตัวกำหนดขอบเขตของ Layout ซึ่งอาจจะเป็นแบบคงที่ (Fixed) หรือแบบเต็มหน้าจอ (Fluid)
    • Row: ใช้แบ่งส่วนต่าง ๆ ภายใน Container และจัด Columns ให้เป็นแถว
    • Column: กำหนดความกว้างของเนื้อหาภายในแถวแต่ละแถว

รูปแบบการใช้งานพื้นฐานของ Grid System

1. การใช้งาน Container

HTML
<div class="container">
  <!-- เนื้อหาภายในจะถูกจัดให้อยู่ในขอบเขตแบบคงที่ -->
</div>

หรือถ้าต้องการให้ Container กินพื้นที่เต็มจอ สามารถใช้ container-fluid แทน

HTML
<div class="container-fluid">
  <!-- เนื้อหาภายในจะถูกจัดให้อยู่ในขอบเขตแบบเต็มหน้าจอ -->
</div>

2. การใช้งาน Row และ Column

ภายใน Container จะประกอบด้วย Row และ 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>

ตัวอย่างนี้จะแสดงผลออกมาเป็น 3 คอลัมน์ที่มีความกว้างเท่ากัน แต่ละคอลัมน์จะกินพื้นที่ไป 1/3 ของแถวทั้งหมด

การกำหนดขนาดคอลัมน์

Bootstrap 4 รองรับการกำหนดขนาดของคอลัมน์ได้โดยใช้ตัวเลข เช่น

HTML
<div class="container">
  <div class="row">
    <div class="col-4">Column 1 (4/12)</div>
    <div class="col-8">Column 2 (8/12)</div>
  </div>
</div>

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

การใช้งาน Responsive Grid

Bootstrap 4 รองรับการออกแบบเว็บไซต์แบบ Responsive โดยมีการกำหนด Breakpoints สำหรับขนาดหน้าจอต่าง ๆ ได้แก่

  • col-sm- สำหรับหน้าจอขนาดเล็ก (≥576px)
  • col-md- สำหรับหน้าจอขนาดกลาง (≥768px)
  • col-lg- สำหรับหน้าจอขนาดใหญ่ (≥992px)
  • col-xl- สำหรับหน้าจอขนาดใหญ่มาก (≥1200px)

ตัวอย่างการใช้งาน Responsive Grid

HTML
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-sm-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-sm-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>
  • สำหรับหน้าจอขนาดเล็ก (col-sm), คอลัมน์ทั้งหมดจะแสดงในแถวเดียวกัน (12 ส่วน)
  • สำหรับหน้าจอขนาดกลาง (col-md), คอลัมน์จะจัดอยู่ใน 2 แถว โดยแต่ละแถวจะแสดง 6 ส่วน (ครึ่งหน้าจอ)
  • สำหรับหน้าจอขนาดใหญ่ (col-lg), คอลัมน์ทั้งหมดจะแสดงใน 3 คอลัมน์ที่มีขนาด 4 ส่วน (1/3 ของแถว)

การใช้งาน Offset เพื่อเลื่อนตำแหน่งคอลัมน์

เราสามารถเลื่อนคอลัมน์โดยใช้ Offset เช่น

HTML
<div class="container">
  <div class="row">
    <div class="col-md-4 offset-md-4">Column (Centered)</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์ที่มีความกว้าง 4 ส่วนจะถูกเลื่อนไป 4 ส่วนทางขวา ทำให้ดูเหมือนถูกจัดกึ่งกลางของหน้าจอ

การจัดแนวคอลัมน์และเนื้อหา

Bootstrap 4 รองรับการจัดแนวคอลัมน์แนวตั้งและแนวนอนได้โดยใช้ Flexbox เช่น

  • justify-content-* สำหรับการจัดแนวนอน
  • align-items-* สำหรับการจัดแนวตั้ง

ตัวอย่าง

HTML
<div class="container">
  <div class="row justify-content-center align-items-center" style="height: 200px;">
    <div class="col-6">Centered Content</div>
  </div>
</div>

ในตัวอย่างนี้ คอนเทนต์จะถูกจัดกึ่งกลางทั้งในแนวนอนและแนวตั้งภายในแถว

สรุป

การใช้ Grid System ใน Bootstrap 4 ช่วยให้นักพัฒนาเว็บสามารถสร้าง Layout ที่สวยงามและเป็นระเบียบได้ง่าย และสามารถปรับเปลี่ยนรูปแบบตามขนาดหน้าจอของอุปกรณ์ต่าง ๆ ได้อย่างอัตโนมัติ การใช้งาน Container, Row และ Column นั้นถือเป็นหัวใจสำคัญของการจัด Layout ใน Bootstrap ซึ่งช่วยให้การออกแบบเว็บไซต์มีความยืดหยุ่นและตอบสนองต่อความต้องการของผู้ใช้ได้ดียิ่งขึ้น

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

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