สอนใช้งาน Bootstrap 4

Bootstrap 4 Grid Stacked-to-horizontal

ใน Bootstrap 4 ระบบกริด (Grid system) เป็นเครื่องมือสำคัญที่ช่วยในการออกแบบเว็บไซต์ให้มีการจัดวางคอนเทนต์อย่างเป็นระเบียบทั้งในหน้าจอขนาดเล็กและใหญ่ โดยรูปแบบการใช้งาน Grid แบบ “Stacked-to-horizontal” หมายถึงการจัดวางคอนเทนต์ให้อยู่ในแนวตั้ง (Stacked) เมื่ออยู่ในหน้าจอขนาดเล็ก เช่น มือถือ และปรับเป็นแนวนอน (Horizontal) เมื่ออยู่ในหน้าจอขนาดใหญ่ขึ้น เช่น Tablet หรือ Desktop

หลักการทำงานของ Bootstrap Grid System

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

  • .col- สำหรับหน้าจอขนาดเล็กมาก (xs)
  • .col-sm- สำหรับหน้าจอขนาดเล็ก (sm)
  • .col-md- สำหรับหน้าจอขนาดกลาง (md)
  • .col-lg- สำหรับหน้าจอขนาดใหญ่ (lg)
  • .col-xl- สำหรับหน้าจอขนาดใหญ่พิเศษ (xl)

เราสามารถกำหนดการจัดวางคอนเทนต์ให้เรียงซ้อนกันในหน้าจอขนาดเล็ก และเรียงเป็นแนวนอนในหน้าจอขนาดใหญ่โดยการใช้คลาสเหล่านี้ร่วมกัน

การใช้งานแบบ Stacked to Horizontal

สมมติว่าเราต้องการสร้างเลย์เอาต์ที่มี 3 คอลัมน์ ที่จะเรียงในแนวตั้งเมื่ออยู่บนมือถือ (หน้าจอเล็ก) และเรียงในแนวนอนเมื่ออยู่บนหน้าจอที่ใหญ่ขึ้น เราจะใช้คลาสดังนี้

HTML
<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">Column 1</div>
    <div class="col-12 col-md-4">Column 2</div>
    <div class="col-12 col-md-4">Column 3</div>
  </div>
</div>
  • .col-12: ให้คอลัมน์นี้ใช้พื้นที่เต็ม (100%) ของหน้าจอขนาดเล็ก
  • .col-md-4: เมื่อหน้าจอขนาดกลางขึ้นไป (md ขึ้นไป) ให้คอลัมน์นี้ใช้พื้นที่ 4 ส่วนจากทั้งหมด 12 ส่วน (33.33%)

ดังนั้น เมื่อใช้งานในหน้าจอขนาดเล็ก คอลัมน์จะเรียงกันในแนวตั้ง (Stacked) แต่ในหน้าจอขนาดใหญ่ขึ้น คอลัมน์จะเรียงเป็นแนวนอน (Horizontal)

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

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

ตัวอย่างการปรับใช้ Grid แบบ Stacked to Horizontal ในหลากหลายรูปแบบ

สองคอลัมน์ Stacked to Horizontal

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

ในหน้าจอเล็กจะเรียงกันในแนวตั้ง แต่เมื่ออยู่บนหน้าจอขนาดกลางขึ้นไปจะเรียงเป็น 2 คอลัมน์แนวนอน

การจัดวางคอลัมน์ด้วยสัดส่วนที่แตกต่าง

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

คอลัมน์นี้จะเรียงซ้อนกันในหน้าจอเล็ก แต่จะจัดวางแบบ 8 ส่วนกับ 4 ส่วน เมื่อหน้าจอใหญ่ขึ้น

คอลัมน์หลายขนาดที่ซับซ้อน

HTML
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4 col-md-3">Column 1</div>
    <div class="col-6 col-sm-4 col-md-3">Column 2</div>
    <div class="col-6 col-sm-4 col-md-3">Column 3</div>
    <div class="col-6 col-sm-4 col-md-3">Column 4</div>
  </div>
</div>

ในหน้าจอขนาดเล็กที่สุด แต่ละคอลัมน์จะใช้พื้นที่ครึ่งหนึ่ง (col-6) แต่เมื่อหน้าจอขนาดใหญ่ขึ้นแต่ละคอลัมน์จะมีขนาดที่เล็กลงตามลำดับ (col-sm-4, col-md-3)

การประยุกต์ใช้งาน

การใช้งาน Grid แบบ Stacked to Horizontal สามารถประยุกต์ใช้ในหลากหลายส่วนของเว็บไซต์ เช่น

  • Header หรือ Navigation Bar: ในหน้าจอมือถือเมนูจะเรียงซ้อนกัน ในขณะที่ในหน้าจอขนาดใหญ่ เมนูจะแสดงเป็นแนวนอน
  • Section ของคอนเทนต์: เช่น รูปภาพหรือข้อความใน Section ใด Section หนึ่งอาจถูกจัดวางให้เรียงซ้อนในมือถือและเรียงข้างกันเมื่อเปิดบนคอมพิวเตอร์
  • ฟอร์มหลายฟิลด์: ฟิลด์ในฟอร์มสามารถเรียงซ้อนกันในมือถือและเรียงข้างกันในหน้าจอที่ใหญ่ขึ้นเพื่อประหยัดพื้นที่

สรุป

การใช้ Grid แบบ Stacked to Horizontal ของ Bootstrap 4 ช่วยให้สามารถออกแบบเว็บไซต์ที่ตอบสนองต่อขนาดหน้าจอได้ง่ายขึ้น โดยไม่ต้องเขียนโค้ดแยกต่างหากในแต่ละขนาดหน้าจอ การใช้งานคลาสที่ปรับตามขนาดหน้าจอ เช่น .col-, .col-sm-, .col-md- จะทำให้การออกแบบเว็บมีความยืดหยุ่นและเหมาะสมกับทุกอุปกรณ์

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

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