บทความนี้เป็นส่วนหนึ่งของซีรีส์ Full-Stack PHP 8 + Bootstrap 5 + MySQL — สร้างเว็บไซต์แบบ Full Stack ตั้งแต่พื้นฐานจนใช้งานได้จริง พร้อมสร้างและเผยแพร่เว็บไซต์ Portfolio ของตนเอง (เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD.) — ตอนที่ 5/10
Bootstrap คือชุดเครื่องมือ CSS สำเร็จรูปที่ได้รับความนิยมมากที่สุดตัวหนึ่งของโลก ภายในมี class ตกแต่งหน้าเว็บเตรียมไว้ให้เกือบทุกอย่าง เช่น ปุ่ม การ์ด แถบเมนู และระบบจัดวางเนื้อหา (Grid) ทำให้หน้าเว็บของเราสวยงามและรองรับทุกขนาดหน้าจอ (Responsive) ได้โดยไม่ต้องเขียน CSS เองทีละบรรทัด ในซีรีส์นี้ใช้ Bootstrap เวอร์ชัน 5
การ Import ด้วย CDN
การนำ Bootstrap เข้ามาใช้ในเว็บทำได้ 2 วิธี คือ ดาวน์โหลดไฟล์มาเก็บไว้ในโปรเจกต์ของเราเอง หรือเรียกผ่าน CDN (Content Delivery Network) ซึ่งเป็นบริการฝากไฟล์ไว้บนอินเทอร์เน็ต ในซีรีส์นี้เราใช้วิธี CDN เพราะเพิ่มโค้ดเพียง 2 บรรทัดก็ใช้งานได้ทันที (เครื่องที่เปิดเว็บต้องต่ออินเทอร์เน็ต)
- ไฟล์ CSS ของ Bootstrap วางไว้ในส่วน head
- ไฟล์ JavaScript ของ Bootstrap วางไว้ก่อนปิด body ใช้กับ Component ที่ต้องกดหรือเคลื่อนไหว
- ใน head ต้องมี meta viewport ด้วย เพื่อให้เว็บย่อขยายตามขนาดจอมือถือได้ถูกต้อง
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Content
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Container กรอบเนื้อหาหลัก
เนื้อหาของเว็บควรอยู่ในกล่อง Container เสมอ เพื่อให้ Bootstrap ช่วยจัดระยะขอบให้ โดยมีให้เลือก 2 แบบ
- container จำกัดความกว้างและจัดเนื้อหาไว้กลางจอ อ่านง่ายบนจอใหญ่ (นิยมใช้เป็นหลัก)
- container-fluid ขยายเนื้อหาเต็มความกว้างหน้าจอเสมอ
ตัวอย่าง
<div class="container">เนื้อหาอยู่กลางจอ กว้างพอดีอ่านสบาย</div>
<div class="container-fluid">เนื้อหากว้างเต็มหน้าจอ</div>ระบบ Grid จัดวางเนื้อหาเป็นแถวและคอลัมน์
Bootstrap แบ่งความกว้างของ 1 แถว (row) ออกเป็น 12 ช่องเท่า ๆ กันเสมอไม่ว่ากรณีใด เราเลือกได้ว่าจะให้กล่องเนื้อหา (col) แต่ละใบกว้างกี่ช่อง โดยตัวเลขของทุกกล่องในแถวเดียวกันควรรวมกันได้ 12 พอดี
แผนภาพระบบ Grid ของ Bootstrap แบ่ง 1 แถวออกเป็น 12 คอลัมน์
ตัวอย่าง
<div class="container">
<div class="row">
<div class="col-md-8">เนื้อหาหลัก</div>
<div class="col-md-4">เมนูด้านข้าง</div>
</div>
</div>col-md-8 หมายถึงกว้าง 8 ช่องเมื่อจอกว้างระดับกลาง (md) ขึ้นไป โดยกำหนดขนาดจอได้หลายระดับ ได้แก่ sm md lg xl ถ้าเปิดบนจอที่เล็กกว่าที่กำหนด เช่น มือถือ Bootstrap จะเรียงกล่องต่อกันเต็มความกว้างให้อัตโนมัติ และถ้าต้องการเลย์เอาต์ซับซ้อนขึ้น สามารถซ้อน row ใหม่ลงใน col เดิมได้อีกชั้น (เรียกว่า Nesting)
การเรียกใช้ Components
Component คือชิ้นส่วนหน้าเว็บสำเร็จรูปของ Bootstrap เช่น ปุ่ม การ์ด แถบเมนู วิธีใช้คือเปิดเอกสารที่เว็บ https://getbootstrap.com เลือก Component ที่ต้องการ คัดลอกโค้ดตัวอย่างมาวางในเว็บของเรา แล้วแก้ข้อความหรือสีตามต้องการ
ตัวอย่าง ปุ่ม (Button)
<button class="btn btn-primary">บันทึก</button>
<button class="btn btn-danger">ลบ</button>
<a class="btn btn-success" href="add.php">เพิ่มผลงาน</a>
ตัวอย่าง การ์ด (Card)
<div class="card">
<img src="https://picsum.photos/600/400" class="card-img-top">
<div class="card-body">
<h5 class="card-title">ชื่อผลงาน</h5>
<p class="card-text">คำอธิบายสั้น ๆ ของผลงานชิ้นนี้</p>
</div>
</div>
ตัวอย่าง แถบเมนู (Navbar)
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.php">My Portfolio</a>
<a class="btn btn-outline-light btn-sm" href="add.php">+ เพิ่มผลงาน</a>
</div>
</nav>
class ที่นิยมใช้กัน
| class | ความหมาย |
|---|---|
| container , container-fluid | กรอบเนื้อหาหลัก แบบกลางจอ / แบบเต็มจอ |
| row , col-… | แถวและคอลัมน์ของระบบ Grid |
| btn btn-primary | ปุ่มสีน้ำเงินหลัก (เปลี่ยนสีได้ เช่น btn-danger สีแดง btn-success สีเขียว) |
| card | กล่องการ์ด เหมาะกับการแสดงผลงานเป็นใบ ๆ |
| form-control | ตกแต่งช่องกรอกข้อมูลในฟอร์มให้สวยงาม |
| text-center | จัดเนื้อหาไว้กึ่งกลาง |
| my-3 , p-3 | เว้นระยะห่างด้านนอก (margin) และด้านใน (padding) |
| navbar | แถบเมนูด้านบนของเว็บ |
อ่านเนื้อหา Bootstrap 5 ฉบับเต็มพร้อมตัวอย่างเพิ่มเติมได้ที่ https://blogs.wutthiphon.space/development/website_dev/904/
🧪 Workshop 3: ทำหน้าเว็บให้เสร็จสมบูรณ์โดยใช้ Bootstrap 5
จากไฟล์ที่ทำก่อนหน้า ให้แปลงมาใช้ Bootstrap 5 และจัดหน้าเว็บให้สวยงาม
วิธีทำ
- เพิ่ม CDN Bootstrap 5.3 และเรียกใช้ CSS ที่ head กับ script ที่ก่อนปิด body
- เข้าเว็บ https://getbootstrap.com
- นำ Components สำเร็จรูปมาใช้ รวมถึงการทำ navbar และ fixed-top
- เพิ่ม CDN Google Font และเรียกใช้ที่ head (Exclusive)
- เพิ่ม CDN Font Awesome (Icon) และเรียกใช้ที่ head (Exclusive)
- ตกแต่งหน้าเว็บให้สวยงาม หน้าแรกให้เสร็จสมบูรณ์เพื่อพร้อมขึ้น PHP
