Bootstrap là bộ công cụ giao diện (CSS framework) phổ biến nhất thế giới, cung cấp sẵn hệ thống lưới, hàng trăm lớp tiện ích và các thành phần như nút, thẻ, menu, hộp thoại. Bài này giới thiệu Bootstrap 5.3, cách cài đặt bằng CDN, npm và cấu trúc trang khởi đầu.
- Hiểu Bootstrap là gì, khi nào nên dùng
- Cài Bootstrap 5.3 bằng CDN và npm
- Tạo trang khởi đầu chuẩn
- Biết cách tra cứu tài liệu chính thức
- CSS framework
- Bộ CSS (và JS) viết sẵn theo quy ước để dựng giao diện nhanh.
- CDN
- Mạng phân phối nội dung: nhúng tệp qua đường dẫn, không cần tải về.
- Bundle
- Tệp JS gộp sẵn Popper, cần cho dropdown, tooltip.
Một số khái niệm
Bootstrap ra đời tại Twitter (2011), nay ở phiên bản 5.3 (bản vá 5.3.8). So với Bootstrap 4: bỏ jQuery (JavaScript thuần), có chế độ màu sáng/tối, dùng biến CSS, lưới có thêm breakpoint xxl, bộ tiện ích mở rộng. Ưu điểm: làm giao diện nhanh, đồng nhất, responsive và có trợ năng sẵn; nhược điểm: trang dễ “giống Bootstrap” nếu không tùy biến, tải cả phần không dùng nếu không tối ưu.
| Thành phần | Nội dung |
|---|---|
| Layout | Container, lưới 12 cột, breakpoint |
| Content | Typography, ảnh, bảng |
| Forms | Ô nhập, chọn, kiểm tra dữ liệu |
| Components | Nút, thẻ, navbar, modal, carousel... |
| Utilities | Lớp tiện ích: khoảng cách, màu, flex, hiển thị |
| Helpers | Ratio, stacks, visually-hidden... |
Trang khởi đầu với CDN
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trang Bootstrap đầu tiên</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<h1 class="text-success">Xin chào Bootstrap 5!</h1>
<button class="btn btn-primary">Nút chính</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html><div class="container py-3">
<h1 class="text-success">Xin chào Bootstrap 5!</h1>
<p class="lead">Chỉ cần thêm class, không viết CSS.</p>
<button class="btn btn-primary">Nút chính</button>
<button class="btn btn-outline-secondary">Nút phụ</button>
</div>Cài bằng npm (dự án Vite)
npm create vite@latest du-an-bs -- --template vanilla
cd du-an-bs
npm install bootstrap @popperjs/core
npm run dev// main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import * as bootstrap from 'bootstrap'; // nạp JS cho modal, dropdown...Cài bằng npm cho phép tùy biến bằng Sass và chỉ nạp phần cần dùng (bài 10).
Cách học và tra cứu
- Tài liệu chính thức: getbootstrap.com/docs/5.3 (mỗi thành phần có ví dụ và mã).
- Mẫu dựng sẵn: getbootstrap.com/docs/5.3/examples (album, dashboard, blog...).
- Biểu tượng: icons.getbootstrap.com (hơn 2.000 biểu tượng).
- Mẹo: học cách đặt tên lớp theo quy luật, không cần thuộc lòng từng lớp.
Đừng trộn Bootstrap 5 với Bootstrap 3/4 hoặc jQuery cũ trong cùng trang: tên lớp nhiều chỗ khác nhau (ví dụ ml-2 thành ms-2, data-toggle thành data-bs-toggle).
Thiếu thẻ meta viewport thì lưới responsive không hoạt động đúng trên điện thoại.
- Tạo trang khởi đầu bằng CDN, thêm tiêu đề và 3 nút màu khác nhau.
- Mở trang Examples, chọn một mẫu và đọc mã nguồn.
- Tạo dự án Vite + Bootstrap bằng npm.
- Liệt kê 5 lớp bạn đoán được ý nghĩa chỉ nhờ tên (ví dụ text-center).
- Bootstrap 5.3: CSS + JS thuần, chế độ màu, biến CSS.
- Nhúng CSS trong head, bundle JS cuối body.
- npm cho dự án lớn, tùy biến Sass.
- Tra cứu getbootstrap.com/docs/5.3.