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 = ต่อเลโก้ แค่หยิบคลาสมาประกอบ ก็ได้เว็บสวยระดับมืออาชีพ 🎨