07: Introduction to Bootstrap 5

สร้างเว็บสวยและรองรับมือถือ (Responsive) แบบติดจรวด

1. Why Bootstrap?

Bootstrap คือ CSS Framework ยอดนิยม เปรียบเสมือน "อาหารสำเร็จรูป" ของคนทำเว็บ

Responsive โดยกำเนิด

เขียนทีเดียว สวยทั้งบนมือถือ แท็บเล็ต และคอมพิวเตอร์
ไม่ต้องเขียน Media Query เองให้เหนื่อย

Components พร้อมใช้

มีปุ่ม, เมนู, การ์ด, ฟอร์มสวยๆ เตรียมไว้ให้แล้ว
แค่เรียกใช้ Class ก็ใช้ได้เลย

Grid System

ระบบจัดหน้าเว็บแบบ 12 คอลัมน์
ที่ช่วยให้การจัด Layout ง่ายเหมือนต่อ Lego

2. Installation (ติดตั้งผ่าน CDN)

วิธีที่ง่ายที่สุดคือการ "แปะลิงก์" (CDN) ไม่ต้องโหลดไฟล์ลงเครื่อง

1. CSS (วางใน <head>)
HTML 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
2. JS Bundle (วางก่อนปิด </body>)
HTML 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

3. The Grid System (หัวใจสำคัญ)

Bootstrap แบ่งหน้าจอออกเป็น 12 คอลัมน์ แนวตั้งเสมอ ไม่ว่าหน้าจอจะกว้างแค่ไหน

1
2
3
4
5
6
7
8
9
10
11
12
สูตรโครงสร้าง Grid:
.container .row .col-XX-YY
  • Container: กล่องใหญ่สุด คอยคุมความกว้างไม่ให้ล้นจอ
  • Row: แถวแนวนอน (ต้องอยู่ใน Container เสมอ)
  • Col: คอลัมน์ (ต้องอยู่ใน Row เสมอ) โดยตัวเลขข้างหลังรวมกันต้องได้ 12
Responsive Breakpoints (จุดตัดหน้าจอ)
Class Prefix ขนาดหน้าจอ อุปกรณ์
col- < 576px มือถือแนวตั้ง (เล็กสุด)
col-sm- ≥ 576px มือถือแนวนอน
col-md- ≥ 768px แท็บเล็ต (iPad)
col-lg- ≥ 992px แล็ปท็อปทั่วไป
col-xl- ≥ 1200px หน้าจอคอมขนาดใหญ่
เทคนิคการเลือกใช้ Class 3 รูปแบบ

ใน Bootstrap เลือกใช้ Class ได้ 3 รูปแบบตามวัตถุประสงค์

1. แบบแบ่งเค้กเท่ากัน (Auto)
.col

ใช้เมื่อ "ขี้เกียจคิดเลข" แต่อยากให้ทุกช่องหารเท่ากันเองอัตโนมัติ

HTML 
<div class="row">
  <div class="col">Auto</div>
  <div class="col">Auto</div>
</div>
2. แบบล็อกตายตัว (Fixed)
.col-6 (ไม่มีขีดกลาง)

ใช้เมื่อต้องการ "ล็อกขนาดเดิมตลอดกาล" ไม่ว่าจะดูบนมือถือหรือคอม ก็จะกว้างเท่าเดิมเสมอ

HTML 
<div class="row">
  <div class="col-6">Left</div>
  <div class="col-6">Right</div>
</div>
3. แบบยืดหยุ่น (Responsive)
.col-md-6

คือ การสั่งว่า "ถ้าจอเล็กกว่านี้ ให้เด้งไปเต็มจอ (100%) แต่ถ้าจอใหญ่พอ ให้แบ่งตามเลขที่บอก"

HTML 
<div class="row">
  <div class="col-12 col-md-6">...</div>
  <div class="col-12 col-md-6">...</div>
</div>
สรุปสั้นๆ:
  • ใช้ .col คือ หารเท่ากันเอง (กี่ช่องก็ได้)
  • ใช้ .col-ตัวเลข คือ ล็อกความกว้างไว้ตลอดกาล (มือถือ-คอม เหมือนกันเป๊ะ)
  • ใช้ .col-ขีด-ตัวเลข (เช่น .col-md-6) คือ เริ่มใช้ความกว้างนี้ เฉพาะจอขนาดนั้นขึ้นไป (ถ้าจอเล็กกว่า จะเด้งไปเต็มจอ 100%)
Spacing Utilities (การจัดระยะห่าง)

Bootstrap เตรียม Class สำหรับจัดการระยะห่างมาให้ครบ ทั้งระยะระหว่างคอลัมน์ (Gutter) และระยะของ Element (Margin/Padding)

1. Gutters (ช่องไฟระหว่างคอลัมน์)

ใช้ class g-* ใส่ที่ Row เพื่อดันให้ Column ห่างออกจากกัน

.g-4 (ห่าง 1.5rem)
Col A
Col B
Col C
Col D
Syntax:
  • g-0 : ชิดกันสนิท (ไม่มีช่องว่าง)
  • g-1 ถึง g-5 : ห่างน้อย ไปหา มาก
  • gx-* : ห่างเฉพาะแนวนอน (ซ้าย-ขวา)
  • gy-* : ห่างเฉพาะแนวตั้ง (บน-ล่าง)
นิยมสุด: g-3 (มาตรฐาน) และ g-4 (โปร่งสบาย)
HTML
<div class="row g-4">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>
2. Margin & Padding (ระยะห่างวัตถุ)

หลักการเดียวกับ Box Model แต่เขียนย่อด้วย Class {property}{sides}-{size}

Property (อะไร) Side (ด้านไหน) Size (เท่าไหร่)
m = Margin (นอก)
p = Padding (ใน) 		t = Top (บน)
b = Bottom (ล่าง)
s = Start (ซ้าย)
e = End (ขวา)
x = แกน X (ซ้าย+ขวา)
y = แกน Y (บน+ล่าง)
(ว่าง) = ทุกด้าน 		0 = 0px (ลบออก)
1 = 0.25rem (นิดเดียว)
2 = 0.5rem
3 = 1rem (มาตรฐาน)
4 = 1.5rem
5 = 3rem (เยอะมาก)
auto = อัตโนมัติ
ตัวอย่างการผสมคำ (Combination)
mt-5 Margin Top 5
(ดันข้างบนห่างเยอะๆ)
px-4 Padding X 4
(เพิ่มเนื้อที่ซ้าย-ขวา)
mb-0 Margin Bottom 0
(ลบช่องว่างด้านล่างออก)
Pro Tip: mx-auto ใช้สำหรับ "จัดกล่องให้อยู่กึ่งกลาง" (เหมือน margin: 0 auto ใน CSS)

Workshop: 3 Columns Layout

สร้างไฟล์ grid-test.html แล้วลองทำ Layout หน้าเว็บข่าว:

โจทย์:
  • หน้าจอคอม (md ขึ้นไป): แสดงข่าวเรียงกัน 3 กล่อง แนวนอน
  • หน้าจอมือถือ: แสดงข่าวเรียงกัน 1 กล่อง แนวตั้ง (ซ้อนกันลงมา)
Hint Code 
<div class="container">
  <div class="row">
    <div class="col-??? col-md-??? bg-light border">
        News 1
    </div>
    <div class="col-??? col-md-??? bg-light border">
        News 2
    </div>
    <div class="col-??? col-md-??? bg-light border">
        News 3
    </div>
  </div>
</div>
Practice Mission: วางโครงเว็บ "Aroi Around"
บรีฟจากลูกค้า (Food Blogger):

"อยากได้หน้าแรกของบล็อกที่ดูทันสมัย ส่วนบน อยากให้มีรูปไฮไลท์ใหญ่ ๆ อยู่ทางซ้าย แล้วมีประวัติของ Blogger สั้น ๆ อยู่ทางขวา ส่วน ด้านล่าง ขอเป็นรีวิวร้านอาหารล่าสุด 3 ร้านเรียงกัน แล้วก็ต้องดูในมือถือรู้เรื่องด้วย"

1. ส่วนไฮไลท์

สร้าง Row แรก และแบ่งคอลัมน์ดังนี้:

  • ฝั่งซ้าย (รูปไฮไลท์): บน PC ให้กว้าง 8 ส่วน (col-md-8) / มือถือเต็มจอ
  • ฝั่งขวา (About Me): บน PC ให้กว้าง 4 ส่วน (col-md-4) / มือถือเต็มจอ
  • Content: ใส่รูปภาพ (`img-fluid`) ในฝั่งซ้าย และใส่ Text แนะนำตัวในฝั่งขวา
2. รีวิวล่าสุด

สร้าง Row ที่สอง (ใส่ g-4 เพื่อเพิ่มช่องว่าง) และแบ่งคอลัมน์ดังนี้:

  • จำนวน: สร้าง 3 กล่อง (Card ใช้ class border bg-light)
  • ขนาด:
    • บน PC: เรียง 3 คอลัมน์ (col-md-4)
    • บนมือถือ: เรียง 1 คอลัมน์ (ไม่ต้องใส่ -md-)
  • Content: ใส่รูปภาพและชื่อร้านอาหารสั้น ๆ
3. การแสดงผล

ลองย่อ-ขยายหน้าจอ Browser เพื่อตรวจสอบความถูกต้อง

  • 🖥️ จอคอม: ต้องเห็นส่วนไฮไลท์เป็น 2 ฝั่ง (ซ้ายใหญ่/ขวาเล็ก) และรีวิวเรียงกัน 3 กล่องแนวนอน
  • 📱 จอมือถือ: ทุกอย่างต้องเรียงซ้อนกันเป็นแนวตั้ง ทีละบล็อก ไม่มีการบีบจนเละ
บทก่อนหน้า บทต่อไป