Đến giờ thì bạn đã “nằm lòng” được nhiều kiến thức PHP phía sau màn hình rồi đúng không? Nhưng giờ thử tưởng tượng: người dùng mở website lên mà chỉ thấy chữ chạy loằng ngoằng thì… mất điểm quá!
Ở bài này, chúng ta sẽ cùng “tút lại giao diện” cho form, bảng, nút nhấn,… bằng Bootstrap – một thư viện CSS giúp bạn làm web trông chuyên nghiệp mà chẳng cần giỏi thiết kế!
Vì sao nên dùng Bootstrap?
- Thiết kế đẹp sẵn, chuẩn responsive (tự co dãn theo màn hình)
- Dễ dùng, dễ học, dễ nhớ
- Có đủ thành phần giao diện phổ biến như: form, button, alert, modal…
Ghi nhớ: Bootstrap giúp bạn “làm đẹp” web dễ dàng mà không cần viết quá nhiều CSS thủ công.
Cách tích hợp Bootstrap vào dự án PHP
Bạn có 2 cách:
- Dùng CDN (copy link thẳng vào
<head>) - Tải về file
.cssvà.jstừ trang chủ (ít dùng hơn với người mới)
Ví dụ dùng CDN:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Tạo một form đăng ký bằng Bootstrap
<form action="register.php" method="post" class="w-50 mx-auto mt-5 border p-4 rounded">
<h2 class="mb-4">Đăng ký thành viên</h2>
<div class="mb-3">
<label for="username" class="form-label">Tên đăng nhập</label>
<input type="text" class="form-control" name="username" id="username" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Mật khẩu</label>
<input type="password" class="form-control" name="password" id="password" required>
</div>
<button type="submit" class="btn btn-primary">Đăng ký</button>
</form>
Bonus: Alert sau khi gửi form
Bạn có thể dùng các thẻ thông báo của Bootstrap như sau:
<?php if (!empty($message)): ?>
<div class="alert alert-success w-50 mx-auto mt-3">
<?= htmlspecialchars($message) ?>
</div>
<?php endif; ?>
Tổng kết
Bạn thấy không? Chỉ cần vài dòng HTML thêm class của Bootstrap là form của bạn đã trông xịn xò hơn hẳn! Đây chính là bước đệm để bạn kết hợp cả frontend lẫn backend trong các mini project sắp tới.
📌 Đừng lo nếu chưa nhớ hết class của Bootstrap, bạn bạn có thể tra cứu class ở môn học Bootstrap nha! Lúc đầu mình cũng tra Google suốt thôi 😄
Thảo luận