Giới thiệu loạt bài

Bootstrap 5 là bộ công cụ giao diện phổ biến nhất, giúp dựng trang web responsive đẹp và nhanh chỉ bằng các lớp có sẵn. Loạt bài theo Bootstrap 5.3: hệ thống lưới, lớp tiện ích, thành phần, form, JavaScript, chế độ tối, tùy biến bằng Sass và hai dự án thực tế. Mọi ví dụ chạy trực tiếp ngay trong bài.

12 bài, khoảng 12 giờCơ bản đến nâng cao
Bạn sẽ học được
  • Dựng bố cục responsive bằng lưới 12 cột
  • Dùng thành thạo tiện ích và thành phần Bootstrap
  • Tạo giao diện tương tác: modal, offcanvas, accordion, toast
  • Tùy biến thương hiệu và hoàn thành landing page, dashboard

Dành cho ai?

  • Người đã biết HTML và CSS cơ bản.
  • Sinh viên làm đồ án, bài tập lớn cần giao diện nhanh và đẹp.
  • Lập trình viên back-end (PHP, Node.js) muốn tự làm giao diện.

Cần chuẩn bị gì?

  • Trình duyệt mới, VS Code; Internet để nhúng CDN.
  • Nên học trước loạt HTML và CSS (ít nhất CSS Bài 1–13).

Bootstrap hay Tailwind?

Tiêu chíBootstrap 5Tailwind CSS
Cách dùngThành phần có sẵn (btn, card, navbar)Lớp tiện ích nhỏ, tự ghép giao diện
Tốc độ làm giao diện chuẩnRất nhanhNhanh khi đã quen
Mức độ tùy biếnTrung bình (biến, Sass)Rất cao
JavaScript kèm theoCó (modal, dropdown...)Không (tự viết hoặc dùng thư viện)
Phù hợpTrang quản trị, đồ án, dự án cần nhanhSản phẩm có thiết kế riêng, React/Next.js

Nội dung loạt bài

Bài 1. Giới thiệu và cài đặtCDN, npm, trang khởi đầuBài 2. Hệ thống lướicontainer, row, col, breakpointBài 3. Typography và tiện íchMàu, spacing, flex, displayBài 4. Nút, badge, alert, cardThành phần dùng nhiều nhấtBài 5. Navbar và điều hướngNavbar responsive, tabs, phân trangBài 6. Form và kiểm tra dữ liệuFloating label, validationBài 7. Bảng, list group, ảnhTiến độ, spinner, placeholderBài 8. Thành phần JavaScriptModal, offcanvas, accordion, toastBài 9. Icons và chế độ tốiBootstrap Icons, data-bs-themeBài 10. Tùy biếnBiến CSS, SassBài 11. Dự án landing pageTrang giới thiệu khóa họcBài 12. Dự án dashboardTrang quản trị + PHP

Cách học hiệu quả

  • Sửa các class trong ví dụ để thấy ngay thay đổi.
  • Luôn mở tài liệu getbootstrap.com/docs/5.3 song song.
  • Thu nhỏ cửa sổ để quan sát lưới và navbar responsive.
  • Làm lại một trang bạn thích bằng Bootstrap.
Mẹo hay

Kết hợp Bootstrap với PHP và MySQL (Bài 12) là con đường nhanh nhất để có một ứng dụng web hoàn chỉnh cho đồ án.

Tóm tắt
  • 12 bài theo Bootstrap 5.3.
  • Lưới, tiện ích, thành phần, JS, tùy biến.
  • Hai dự án: landing page và dashboard.

Các bài khác …

  1. Bài 1. Giới thiệu và cài đặt Bootstrap 5
  2. Bài 2. Hệ thống lưới: container, row, col
  3. Bài 3. Typography, màu sắc và lớp tiện ích
  4. Bài 4. Nút, badge, alert và card