08: Bootstrap Components

Components ต่าง ๆ ที่น่าสนใจของ Bootstrap

1. Contextual Colors - ชุดสีสื่อความหมาย

Bootstrap ไม่ได้เรียกสีว่า Red, Green, Blue แต่ใช้ชื่อตาม "บริบท" การใช้งาน

Primary (หลัก)
Secondary (รอง)
Success (สำเร็จ)
Danger (อันตราย)
Warning (เตือน)
Info (ข้อมูล)
Light (สว่าง)
Dark (มืด)
Tip: ชื่อสีพวกนี้ใช้ได้กับทุกอย่าง เช่น text-primary (สีตัวอักษร), bg-danger (สีพื้นหลัง), btn-success (สีปุ่ม), border-warning (สีขอบ)

2. Navbar

เมนูสุดเทพที่ย่อเป็น Hamburger Menu ให้อัตโนมัติบนมือถือ (Navbar)

HTML 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MyBrand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">หน้าแรก</a></li>
        <li class="nav-item"><a class="nav-link" href="#">สินค้า</a></li>
        <li class="nav-item"><a class="nav-link" href="#">ติดต่อเรา</a></li>
      </ul>
    </div>
  </div>
</nav>

3. Content Components

Card (การ์ด)

กล่องอเนกประสงค์ ใส่รูป เนื้อหา ปุ่ม ได้ครบ

...
ชื่อสินค้า

รายละเอียดสินค้าสั้นๆ

ซื้อเลย
HTML
<div class="card">
  <img src="..." class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Text...</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
</div>
Carousel (สไลด์รูป)

ภาพเลื่อนอัตโนมัติ

ดูโค้ดเต็ม
Accordion (เมนูยืดหด)

เหมาะสำหรับทำหน้า FAQ (คำถามที่พบบ่อย)

คำตอบ...

คำตอบ...
ดูโค้ดเต็ม

4. Forms & Buttons

Buttons (ปุ่ม)

ใช้ class btn คู่กับสี เช่น btn-primary

Form Controls

ใส่ class form-control ให้ input เสมอ

ตัวอย่าง: ฟอร์มลงทะเบียน
Preview:
HTML Code:
HTML 
<form>
  <div class="mb-3">
    <label class="form-label">ชื่อ-นามสกุล</label>
    <input type="text" class="form-control">
  </div>
  <div class="mb-3">
    <label class="form-label">แผนก</label>
    <select class="form-select">
      <option selected>-- เลือก --</option>
      <option value="1">IT</option>
      <option value="2">HR</option>
    </select>
  </div>

  <div class="mb-3">
    <label class="d-block">เพศ</label>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender" id="m">
      <label class="form-check-label" for="m">ชาย</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender" id="f">
      <label class="form-check-label" for="f">หญิง</label>
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label">ที่อยู่</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="ok">
    <label class="form-check-label" for="ok">ยอมรับเงื่อนไข</label>
  </div>

  <button type="submit" class="btn btn-primary">ส่งข้อมูล</button>
  <button type="reset" class="btn btn-outline-secondary">ยกเลิก</button>
</form>

5. Tables

Bootstrap ช่วยให้ตารางสวยงามทันทีแค่ใส่ class .table และยังมีลูกเล่นอื่น ๆ อีก

ตัวอย่างตารางแบบผสม (Mixed Styles)

ใช้ class ผสมกันได้เลย เช่น .table-striped (สลับสี) + .table-hover (เมาส์ชี้เปลี่ยนสี) + .table-bordered (มีเส้นขอบ)

# ชื่อสินค้า สถานะ ราคา
1 MacBook Pro M3 In Stock ฿59,900
2 iPhone 15 Pro Low Stock ฿41,900
3 iPad Air 5 Out of Stock ฿23,900
HTML 
<table class="table table-striped table-hover table-bordered">
  <thead class="table-dark">
    <tr>...</tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>
รูปแบบอื่น ๆ
  • .table-borderless : ตารางไร้เส้นขอบ (ดูสะอาดตา)
  • .table-sm : ลดระยะห่าง (Padding) ให้ตารางแน่นขึ้น
  • .table-dark : เปลี่ยนเป็นธีมสีมืดทั้งตาราง
  • .align-middle : จัดเนื้อหาให้อยู่กึ่งกลางบรรทัดแนวตั้ง
Pro Tip: Table Responsive

ตารางมักจะมีปัญหา "ล้นจอ" เมื่อเปิดในมือถือ แก้ได้ง่ายๆ ด้วยการเอา div ครอบตารางไว้

HTML 
<div class="table-responsive">
  <table class="table ...">...</table>
</div>

6. Images

Bootstrap มี Class ช่วยจัดการรูปภาพให้แสดงผลได้หลากหลายรูปแบบ

Fluid
.img-fluid

ยืดหดตามขนาดจอ (Max-width: 100%) ควรใส่ทุกรูปในเว็บ

HTML 
<img src="..." class="img-fluid">
Thumbnail
.img-thumbnail

ใส่กรอบขาวและขอบมนเล็กน้อย (เหมือนรูปสินค้า)

HTML 
<img src="..." class="img-thumbnail">
Rounded
.rounded

ลบเหลี่ยมมุมภาพให้ดูนุ่มนวล (Border Radius)

HTML 
<img src="..." class="rounded">
Circle
.rounded-circle

ตัดภาพเป็นวงกลม (รูปต้นฉบับควรเป็นสี่เหลี่ยมจัตุรัส)

HTML 
<img src="..." class="rounded-circle">

7. ไอคอนสวย ๆ ด้วย FontAwesome

Bootstrap ทำงานร่วมกับ FontAwesome ได้ดีเยี่ยม โดยสามารถใช้ไอคอนแทนรูปภาพเพื่อลดขนาดไฟล์และโหลดไวขึ้น

วิธีการใช้งานพื้นฐาน

ใช้ tag <i> ตามด้วย class ของไอคอนที่ต้องการ

Solid
Regular
Brand
Color
HTML 
<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-solid fa-heart text-danger"></i>
การปรับขนาด & แหล่งค้นหา

ใช้ Class ของ FontAwesome เพื่อปรับขนาดได้เลย

  • fa-xs, fa-sm
  • fa-lg (ใหญ่ขึ้น 33%)
  • fa-2x ถึง fa-10x
หาไอคอนได้ที่ไหน?
เข้าเว็บ fontawesome.com แล้วพิมพ์ค้นหา (เลือก Filter เป็น Free)

Workshop: สร้างหน้า Landing Page

สร้างไฟล์ landing.html แล้วประกอบร่าง Components ให้เป็นเว็บขายสินค้า:

โครงสร้างที่ต้องทำ:
  1. Navbar: มีโลโก้ และเมนู (Home, Products, Contact)
  2. Hero Section: ใช้ Carousel รูปสินค้าเด่น ๆ เต็มจอ
  3. Features: ใช้ Grid วาง 3 จุดเด่น (ส่งฟรี, มีประกัน, ของแท้) โดยใช้ Icon FontAwesome
  4. Products: ใช้ Card แสดงสินค้า 4 ชิ้น
  5. Footer: ส่วนล่างสุด ใส่ Copyright
ดาวน์โหลดรูปตัวอย่าง ดาวน์โหลดตัวอย่างข้อความ
Practice Mission: งานสัมมนา "Future Tech 2026"
บรีฟจากผู้จัดงาน:

"บริษัทกำลังจะจัดงานสัมมนาไอทีแห่งปี อยากได้หน้าเว็บที่ดู Modern โดยสิ่งที่ต้องมีคือ สไลด์โชว์บรรยากาศงานปีก่อน, ตารางกำหนดการ, FAQ ถาม-ตอบ และสุดท้ายคือ ฟอร์มลงทะเบียน ครับ"

1. ส่วนแรก
  • Navbar: ใช้ navbar-dark bg-dark มีโลโก้ "FutureTech" และเมนู (Home, Schedule, Register)
  • Hero Slide: ใช้ Carousel แสดงรูปภาพบรรยากาศงาน 3 รูป พร้อมคำบรรยายเท่ ๆ
2. ตารางงาน

สร้างตารางกำหนดการ:

  • หัวตาราง: เวลา, หัวข้อ, วิทยากร
  • ข้อมูล: ใส่ข้อมูลสมมติอย่างน้อย 3 แถว (เช่น 09:00 - AI Revolution)
3. คำถามพบบ่อย

ใช้ Accordion สร้างส่วน FAQ อย่างน้อย 2 ข้อ:

  • Q: งานจัดที่ไหน? / A: ไบเทค บางนา
  • Q: มีค่าใช้จ่ายไหม? / A: ฟรีตลอดงาน
4. ลงทะเบียน

สร้างฟอร์มใน Card:

  • Inputs: ชื่อ-สกุล (Text), อีเมล (Email), ประเภทบัตร (Dropdown List: Student/General)
  • Button: ปุ่ม Submit สีเขียว และปุ่ม Reset สีเทา
บทก่อนหน้า บทต่อไป