Bootstrap คือเฟรมเวิร์ก CSS ที่ช่วยให้สร้างเว็บสวยและ Responsive ได้เร็วมาก โดยไม่ต้องเขียน CSS เองทั้งหมด แค่ใส่ "คลาส" ก็ได้ดีไซน์มืออาชีพทันที บทความนี้จะสอนตั้งแต่เริ่มต้นจนใช้คอมโพเนนต์ได้จริง ═══════════════════════════════════════ 📌 1. Bootstrap คืออะไร ═══════════════════════════════════════ Bootstrap เป็น CSS Framework ยอดนิยมที่สุดในโลก มาพร้อม CSS และ JavaScript สำเร็จรูป ให้คลาสจำนวนมากที่ใช้จัดหน้าตาเว็บ ข้อดี: • สร้างเว็บ Responsive (รองรับมือถือ) ได้ทันที • มีคอมโพเนนต์สำเร็จรูป (ปุ่ม การ์ด เมนู ฟอร์ม Modal) • ประหยัดเวลา ไม่ต้องเขียน CSS เองมาก • ใช้งานง่าย แค่ใส่ class ในแท็ก HTML ═══════════════════════════════════════ 🔧 2. เริ่มใช้ Bootstrap (ผ่าน CDN) ═══════════════════════════════════════ วิธีเร็วที่สุดคือใส่ลิงก์ CDN ใน HTML
html 
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>เว็บของฉัน</title>
</head>
<body>
    <h1 class="text-center text-primary">สวัสดี Bootstrap</h1>

    <!-- Bootstrap JS (วางก่อนปิด body) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
═══════════════════════════════════════ 🧱 3. Grid System — หัวใจของการจัดเลย์เอาต์ ═══════════════════════════════════════ Bootstrap แบ่งหน้าจอเป็น 12 คอลัมน์ ใช้ร่วมกับ container และ row
html 
<div class="container">
    <div class="row">
        <div class="col-md-4">คอลัมน์ 1</div>
        <div class="col-md-4">คอลัมน์ 2</div>
        <div class="col-md-4">คอลัมน์ 3</div>
    </div>
</div>
• container → กล่องครอบเนื้อหา (มีขอบซ้ายขวา) • row → แถว • col-md-4 → คอลัมน์กว้าง 4/12 (3 คอลัมน์เท่ากัน = 12) รวมกันในแถวต้องได้ 12 เช่น col-8 + col-4, หรือ col-6 + col-6 ═══════════════════════════════════════ 📱 4. Responsive Breakpoints ═══════════════════════════════════════ Bootstrap ปรับตามขนาดจอด้วยตัวย่อ
html 
<div class="row">
    <!-- มือถือ = เต็มแถว, แท็บเล็ต = ครึ่ง, จอใหญ่ = 1 ใน 3 -->
    <div class="col-12 col-md-6 col-lg-4">กล่อง</div>
</div>
ตัวย่อขนาดจอ: • (ไม่มี) → มือถือทุกขนาด (xs) • sm → ≥576px • md → ≥768px • lg → ≥992px • xl → ≥1200px • xxl → ≥1400px ═══════════════════════════════════════ 🎨 5. Utility Classes — คลาสช่วยจัดสไตล์ ═══════════════════════════════════════ ระยะห่าง (Spacing): m=margin, p=padding + ทิศทาง + ขนาด 0-5
html 
<div class="mt-3">    <!-- margin-top ระดับ 3 --> </div>
<div class="p-4">     <!-- padding รอบด้าน ระดับ 4 --> </div>
<div class="mx-auto"> <!-- จัดกึ่งกลางแนวนอน --> </div>
<div class="mb-2 px-3"></div>
สีข้อความและพื้นหลัง:
html 
<p class="text-primary">น้ำเงิน</p>
<p class="text-danger">แดง</p>
<div class="bg-success text-white">พื้นเขียว</div>
<div class="bg-warning">พื้นเหลือง</div>
ข้อความ:
html 
<p class="text-center fw-bold">กึ่งกลาง ตัวหนา</p>
<p class="text-end fst-italic">ชิดขวา ตัวเอียง</p>
<p class="fs-3 text-muted">ขนาดใหญ่ สีจาง</p>
═══════════════════════════════════════ 🧩 6. คอมโพเนนต์ยอดนิยม ═══════════════════════════════════════ ปุ่ม (Buttons):
html 
<button class="btn btn-primary">หลัก</button>
<button class="btn btn-success">สำเร็จ</button>
<button class="btn btn-danger">อันตราย</button>
<button class="btn btn-outline-primary">เส้นขอบ</button>
<button class="btn btn-lg btn-primary rounded-pill">ปุ่มมน</button>
การ์ด (Card):
html 
<div class="card" style="width: 18rem;">
    <img src="photo.jpg" class="card-img-top" alt="รูป">
    <div class="card-body">
        <h5 class="card-title">หัวข้อการ์ด</h5>
        <p class="card-text">รายละเอียดสั้น ๆ ของการ์ด</p>
        <a href="#" class="btn btn-primary">อ่านต่อ</a>
    </div>
</div>
การแจ้งเตือน (Alert):
html 
<div class="alert alert-success">บันทึกสำเร็จ!</div>
<div class="alert alert-danger">เกิดข้อผิดพลาด</div>
<div class="alert alert-warning">คำเตือน</div>
Navbar (แถบเมนู):
html 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">โลโก้</a>
        <div class="navbar-nav">
            <a class="nav-link" href="#">หน้าแรก</a>
            <a class="nav-link" href="#">เกี่ยวกับ</a>
        </div>
    </div>
</nav>
ฟอร์ม (Form):
html 
<form>
    <div class="mb-3">
        <label class="form-label">อีเมล</label>
        <input type="email" class="form-control" placeholder="name@example.com">
    </div>
    <div class="mb-3">
        <label class="form-label">ข้อความ</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
    <button class="btn btn-primary">ส่ง</button>
</form>
═══════════════════════════════════════ 💪 7. Flexbox Utilities ═══════════════════════════════════════ จัดวางด้วยคลาส flex ได้เลย ไม่ต้องเขียน CSS
html 
<div class="d-flex justify-content-between align-items-center">
    <span>ซ้าย</span>
    <span>ขวา</span>
</div>

<div class="d-flex justify-content-center gap-3">
    <button class="btn btn-primary">1</button>
    <button class="btn btn-secondary">2</button>
</div>
• d-flex → เปิดโหมด flex • justify-content-* → จัดแนวนอน (start/center/end/between/around) • align-items-* → จัดแนวตั้ง (start/center/end) • gap-* → ระยะห่าง ═══════════════════════════════════════ 🎯 8. ตัวอย่างการ์ด 3 ใบ Responsive ═══════════════════════════════════════
html 
<div class="container my-5">
    <div class="row g-4">
        <div class="col-12 col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <h5 class="card-title">แพ็กเกจ A</h5>
                    <p class="card-text text-muted">เหมาะกับผู้เริ่มต้น</p>
                    <button class="btn btn-outline-primary">เลือก</button>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card h-100 shadow border-primary">
                <div class="card-body text-center">
                    <h5 class="card-title">แพ็กเกจ B</h5>
                    <p class="card-text text-muted">ยอดนิยม</p>
                    <button class="btn btn-primary">เลือก</button>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <h5 class="card-title">แพ็กเกจ C</h5>
                    <p class="card-text text-muted">สำหรับองค์กร</p>
                    <button class="btn btn-outline-primary">เลือก</button>
                </div>
            </div>
        </div>
    </div>
</div>
═══════════════════════════════════════ ✅ 9. สรุปและเคล็ดลับ ═══════════════════════════════════════ • เริ่มจาก container > row > col เสมอ และรวมคอลัมน์ให้ได้ 12 • ใช้ col-12 col-md-6 col-lg-4 เพื่อ Responsive (มือถือ→แท็บเล็ต→จอใหญ่) • จำ Utility ที่ใช้บ่อย: m/p (ระยะ), text-*, bg-*, d-flex • เปิดเอกสารทางการ getbootstrap.com เพื่อค้นหาคอมโพเนนต์ • อยากปรับแต่งเพิ่ม เขียน CSS ของเราทับได้ (โหลดหลัง Bootstrap) จำไว้: Bootstrap = ต่อเลโก้ แค่หยิบคลาสมาประกอบ ก็ได้เว็บสวยระดับมืออาชีพ 🎨