การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Grid กับหน้าจอขนาดเล็ก (Small)

Bootstrap 5 เป็น Framework ที่ช่วยในการพัฒนาเว็บไซต์ให้มีความยืดหยุ่นและใช้งานง่ายบนอุปกรณ์หลากหลายขนาด โดยเฉพาะอย่างยิ่งการจัดการ Layout ของหน้าเว็บให้สามารถแสดงผลได้อย่างเหมาะสมในหน้าจอที่มีขนาดแตกต่างกันออกไป สำหรับหน้าจอขนาดเล็ก (Small) Bootstrap มีระบบ Grid ที่รองรับการใช้งานอย่างสะดวก และทำให้นักพัฒนาสามารถควบคุม Layout ได้อย่างละเอียดมากขึ้น

โครงสร้างของระบบ Grid ใน Bootstrap 5

Bootstrap ใช้ Flexbox ในการจัดการ Layout โดยระบบ Grid จะถูกแบ่งเป็น 12 คอลัมน์ ซึ่งเราสามารถกำหนดให้คอลัมน์แต่ละส่วนมีขนาดต่างกันได้ตามหน้าจอที่เราต้องการ การตั้งค่าระบบ Grid สามารถแบ่งได้ตามขนาดของหน้าจอ

  • col-sm- สำหรับหน้าจอที่มีความกว้างตั้งแต่ 576px ขึ้นไป (Small)
  • col-md- สำหรับหน้าจอที่มีความกว้างตั้งแต่ 768px ขึ้นไป (Medium)
  • col-lg- สำหรับหน้าจอที่มีความกว้างตั้งแต่ 992px ขึ้นไป (Large)
  • col-xl- สำหรับหน้าจอที่มีความกว้างตั้งแต่ 1200px ขึ้นไป (Extra Large)

การใช้งาน Grid สำหรับหน้าจอขนาดเล็ก (Small)

สำหรับหน้าจอขนาดเล็กที่ความกว้าง 576px ขึ้นไป สามารถใช้คลาส col-sm- ในการกำหนดขนาดของคอลัมน์ได้ โดยสามารถประยุกต์ใช้งานได้หลายรูปแบบตามความต้องการ ตัวอย่างเช่น

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

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

HTML
<div class="container">
  <div class="row">
    <div class="col-sm">คอลัมน์ 1</div>
    <div class="col-sm">คอลัมน์ 2</div>
    <div class="col-sm">คอลัมน์ 3</div>
  </div>
</div>

ในตัวอย่างนี้ แต่ละคอลัมน์จะถูกแบ่งออกเป็นขนาดเท่ากัน (1/3 ของหน้าจอ) ในหน้าจอขนาดเล็กที่มีความกว้าง 576px ขึ้นไป

การแบ่งคอลัมน์แบบไม่เท่ากัน

หากต้องการแบ่งคอลัมน์ไม่เท่ากัน สามารถกำหนดขนาดของคอลัมน์ได้ตามต้องการ เช่น

HTML
<div class="container">
  <div class="row">
    <div class="col-sm-4">คอลัมน์ 1</div>
    <div class="col-sm-8">คอลัมน์ 2</div>
  </div>
</div>

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

การใช้ Grid พร้อมกับการจัดเรียงในหน้าจอเล็ก

นอกจากการแบ่งคอลัมน์แล้ว เรายังสามารถจัดเรียงคอลัมน์ใหม่เมื่อหน้าจอมีขนาดเล็กลงได้โดยใช้คลาส order-sm- ตัวอย่างเช่น

HTML
<div class="container">
  <div class="row">
    <div class="col-sm order-sm-2">คอลัมน์ 1</div>
    <div class="col-sm order-sm-1">คอลัมน์ 2</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์ที่ 2 จะถูกแสดงก่อนคอลัมน์ที่ 1 ในหน้าจอขนาดเล็ก

การใช้งาน Grid ในกรณี Responsive Design

หากต้องการให้หน้าเว็บสามารถแสดงผลได้ดีในทุกขนาดหน้าจอ (Responsive Design) เราสามารถกำหนดขนาดของคอลัมน์ตามขนาดหน้าจอต่างๆ ได้ เช่น

HTML
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4">คอลัมน์ 1</div>
    <div class="col-12 col-sm-6 col-md-4">คอลัมน์ 2</div>
    <div class="col-12 col-sm-6 col-md-4">คอลัมน์ 3</div>
  </div>
</div>

ในหน้าจอขนาดเล็ก (ต่ำกว่า 576px) แต่ละคอลัมน์จะครอบคลุมทั้งแถว (ขนาด 12 ส่วน)

ในหน้าจอขนาดเล็ก (576px ขึ้นไป) คอลัมน์จะแบ่งเป็นครึ่งหนึ่งของแถว (ขนาด 6 ส่วน)

ในหน้าจอขนาดกลาง (768px ขึ้นไป) แต่ละคอลัมน์จะแบ่งเป็น 1 ใน 3 ของแถว (ขนาด 4 ส่วน)

การใช้ Grid สำหรับการจัดการรูปภาพและข้อความ

เรายังสามารถใช้ Grid ในการจัดเรียงรูปภาพและข้อความในหน้าจอขนาดเล็กได้ ตัวอย่างเช่น

HTML
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img src="image.jpg" class="img-fluid" alt="รูปภาพ">
    </div>
    <div class="col-sm-8">
      <p>นี่คือตัวอย่างข้อความที่สามารถแสดงผลข้างๆ รูปภาพในหน้าจอขนาดเล็ก</p>
    </div>
  </div>
</div>

ในตัวอย่างนี้ รูปภาพจะถูกจัดอยู่ในคอลัมน์แรกขนาด 4 ส่วน ขณะที่ข้อความจะอยู่ในคอลัมน์ที่สองขนาด 8 ส่วน

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

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