Bootstrap là gì?
Bootstrap là một framework HTML, CSS và JavaScript giúp xây dựng giao diện web nhanh, nhất quán và thân thiện với mọi thiết bị. Đây là một trong những front-end framework phổ biến nhất thế giới, được phát triển bởi Twitter và hiện là mã nguồn mở.
Với hệ thống lưới 12 cột (Grid System), các component dựng sẵn và thư viện JavaScript phong phú, Bootstrap giúp bạn tạo giao diện responsive chỉ trong thời gian ngắn mà vẫn đảm bảo chất lượng hiển thị.
Vì sao nên sử dụng Bootstrap?
- Dễ học, dễ dùng: Tài liệu rõ ràng, có ví dụ cụ thể, phù hợp cả với người mới.
- Responsive sẵn có: Giao diện tự động tương thích mọi kích thước màn hình (mobile, tablet, desktop…).
- Hệ thống grid mạnh mẽ: Dựa trên 12 cột linh hoạt, dễ chia layout.
- Component phong phú: Có sẵn các thành phần UI như button, navbar, modal, alert, carousel…
- Khả năng tùy biến cao: Có thể mở rộng hoặc override theo ý mình.
- Cộng đồng lớn: Hàng triệu người dùng, tài nguyên dồi dào.
Grid System trong Bootstrap
Bootstrap sử dụng hệ thống lưới 12 cột để chia bố cục giao diện. Cấu trúc như sau:
- Wrapper chính:
.container(cố định) hoặc.container-fluid(toàn màn hình). - Các hàng (row): chứa các cột (col).
- Cột: sử dụng class
.col-*để xác định độ rộng. - Các lớp cột theo kích thước màn hình:
.col-xs-*(mobile),.col-sm-*(tablet),.col-md-*(desktop vừa),.col-lg-*(desktop lớn).
Bảng kích thước theo từng breakpoint
| Điện thoại < 768px |
Tablet ≥ 768px |
Desktop ≥ 992px |
Large Desktop ≥ 1200px |
|
|---|---|---|---|---|
| Tên class | .col-xs-* |
.col-sm-* |
.col-md-* |
.col-lg-* |
| Chiều rộng tổng thể | Auto | 750px | 970px | 1170px |
| Số cột | 12 | |||
| Khoảng cách giữa các cột | 30px (15px mỗi bên) | |||
| Hỗ trợ nest | Có | |||
| Hỗ trợ offset / order | Có | |||
Tài nguyên học Bootstrap
- Trang chính thức của Bootstrap – Tài liệu đầy đủ, luôn cập nhật.
- Dự án Blog cá nhân – Series thực hành ứng dụng Bootstrap từ A-Z.
Kết luận
Bootstrap là công cụ tuyệt vời để tăng tốc độ phát triển front-end, đặc biệt phù hợp với lập trình viên, designer hoặc người mới bắt đầu làm web. Nếu bạn cần tạo giao diện đẹp, responsive, nhanh chóng – Bootstrap là lựa chọn hàng đầu.