Bootstrap: Framework CSS Cho Responsive Web Design
/bootstrap
Bootstrap là một framework front-end đóng gói sẵn CSS và JavaScript để style một trang web mà không cần viết từng rule từ đầu. Repo mô tả nó dùng cho các dự án responsive, mobile-first, cấp phép MIT, với bản v5.3.8 có qua npm, Yarn, Bun, Composer, và NuGet. Dùng khi bạn cần một UI chạy được, tương thích nhiều trình duyệt thật nhanh; bỏ qua nếu bạn muốn viết CSS từ một file Sass trắng, không có gì cần override.
Bootstrap Là Gì?
Bootstrap là một framework front-end đóng gói sẵn file CSS và JavaScript đã compile cho phần style và hành vi, để nhà phát triển thêm thẳng vào dự án. Bản tải về chia CSS thành bundle đầy đủ cộng với các bản build chỉ-grid, chỉ-reboot, và chỉ-utilities, mỗi bản có thêm biến thể RTL và source map cho dev tools. Bundle JavaScript đầy đủ cũng mang theo Popper, theo README; một bản build riêng và bản ES module thì không có.
Các Tính Năng Chính Cho Responsive Web Design
- ✓Bootstrap xuất ra cả bản CSS/JS đã compile lẫn bản minify, kèm source map để dùng với dev tools trên trình duyệt.
- ✓Có các bản build CSS riêng biệt chỉ chứa grid, chỉ chứa reboot, hoặc chỉ chứa utilities (bootstrap-grid.css, bootstrap-reboot.css, bootstrap-utilities.css) bên cạnh bundle CSS đầy đủ.
- ✓Mỗi bundle CSS chính đều có bản RTL đi kèm (.rtl.css / .rtl.min.css) — gồm cả bản grid, reboot, utilities, và bundle đầy đủ.
- ✓Nhiều định dạng build JavaScript: bundle.js đầy đủ có kèm Popper, bản bootstrap.js không có Popper, và bản ES module (bootstrap.esm.js), mỗi loại đều có bản minify và source map.
- ✓Cài đặt được qua npm, Yarn, Bun, Composer, hoặc NuGet, với một package Sass riêng trên NuGet (bootstrap.sass) để dùng trực tiếp file Sass gốc.
- ✓Trang tài liệu được xây bằng Astro, host trên GitHub Pages tại getbootstrap.com, dùng Algolia's DocSearch cho tính năng tìm kiếm.
- ✓Được duy trì theo Semantic Versioning, với changelog đăng ở mục Releases trên GitHub và bài thông báo trên blog chính thức.
Bắt Đầu Với Bootstrap
README liệt kê nhiều cách cài đặt: tải bản zip v5.3.8 về trực tiếp, clone repo bằng `git clone https://github.com/twbs/bootstrap.git`, hoặc cài qua package manager — `npm install [email protected]`, `yarn add [email protected]`, `bun add [email protected]`, hoặc `composer require twbs/bootstrap:5.3.8`. Người dùng NuGet có thể lấy package CSS đã compile (`Install-Package bootstrap`) hoặc package Sass gốc (`Install-Package bootstrap.sass`). Với mọi thứ ngoài lệnh cài đặt — gắn file vào template, chọn stylesheet nào để include — README trỏ sang trang Getting started trên getbootstrap.com thay vì viết trực tiếp trong repo.
Tích Hợp Bootstrap Vào Dự Án Của Bạn
Sau khi cài, thư mục `css/` và `js/` trong bản tải về ánh xạ thẳng tới những gì bạn link hoặc import: dùng `bootstrap.css` (hoặc `.min.css`) đầy đủ cho mọi thứ, hoặc chỉ dùng `bootstrap-grid.css`, `bootstrap-reboot.css`, hay `bootstrap-utilities.css` nếu chỉ cần một lớp. Về phía JavaScript, `bootstrap.bundle.js` mang theo Popper trong cùng một file, còn `bootstrap.js` và bản ES module `bootstrap.esm.js` thì không có Popper, nên lựa chọn phụ thuộc vào việc build của bạn đã tự xử lý Popper như một dependency riêng hay chưa. README để phần markup component thực tế và cách dùng JavaScript API cho trang Getting started tại getbootstrap.com/docs/5.3/getting-started/introduction/. Nó không được lặp lại trong README của repo.
Điểm mạnh
- ✓Nhiều cách cài đặt được ghi rõ — npm, Yarn, Bun, Composer, NuGet, tải zip trực tiếp, hoặc git clone — nên dễ gắn vào hầu hết toolchain đang có sẵn.
- ✓Các bản build CSS chia nhỏ (chỉ grid, chỉ reboot, chỉ utilities, hoặc bundle đầy đủ) nghĩa là bạn không bị bắt buộc ship cả framework nếu chỉ cần một lớp.
- ✓RTL là một output build chính thức, không phải thứ gắn thêm sau — mọi bundle CSS chính đều có bản .rtl.css tương ứng.
- ✓Code cấp phép theo MIT, không ràng buộc sử dụng, và là dự án đã chạy lâu năm — copyright trong README ghi từ năm 2011.
- ✓Có kênh cộng đồng được ghi rõ để hỏi đáp: Discord, GitHub Discussions, tag trên Stack Overflow, Reddit, và IRC, cùng blog chính thức cho release note.
Những Điều Cần Cân Nhắc Khi Dùng Bootstrap
- △README không mô tả trực tiếp markup component, tên utility class, hay API của JavaScript plugin — bạn phải rời khỏi repo và sang getbootstrap.com để biết cách thực sự dựng một trang bằng Bootstrap.
- △Nhánh mặc định chỉ theo dõi Bootstrap 5; ai còn dùng Bootstrap 4 phải checkout nhánh v4-dev riêng để lấy README và source của phiên bản đó, nên hai bản không được duy trì cùng một chỗ.
- △Chạy tài liệu ở local cần cả toolchain Astro (npm install, npm run test để rebuild asset, npm run docs-serve), tốn công hơn nhiều so với chỉ link một file CDN nếu bạn chỉ muốn xem docs offline.
- △Docs được phát hành theo Creative Commons chứ không phải MIT, nên điều khoản license cho code và cho nội dung tài liệu khác nhau, cần theo dõi riêng nếu bạn redistribute nội dung.
- △README không nêu kích thước của bundle CSS/JS đã compile, nên chỉ dựa vào dữ kiện trong repo thì không đánh giá được chi phí tải trang — cần tự kiểm tra file thật hoặc getbootstrap.com.
Các Lựa Chọn Thay Thế Cho Bootstrap
Câu Hỏi Thường Gặp Về Bootstrap
Các link release và lệnh cài package trong README của Bootstrap đều trỏ tới phiên bản 5.3.8, dùng chung cho các lựa chọn npm, Yarn, Bun, Composer, và bản zip tải về.
Bootstrap có thể cài bằng cách tải bản zip v5.3.8, clone repo twbs/bootstrap, hoặc qua npm, Yarn, Bun, Composer, hay NuGet — tất cả đều nằm trong phần quick start của README.
Code của Bootstrap phát hành theo MIT License, còn tài liệu phát hành theo giấy phép Creative Commons, theo mục copyright trong README.
Tài liệu của Bootstrap host trên GitHub Pages tại getbootstrap.com, xây bằng Astro, và cũng có thể chạy ở local từ repo bằng script docs-serve của npm.
Bootstrap ship sẵn các stylesheet RTL riêng, như bootstrap.rtl.css và bootstrap-grid.rtl.css, đi kèm các file CSS left-to-right chuẩn trong bản tải về.
Hướng dẫn đóng góp của Bootstrap nằm ở .github/CONTRIBUTING.md, mọi pull request có thay đổi JavaScript cần kèm unit test, còn HTML và CSS phải theo Code Guide được dẫn link trong đó.
Vấn đề Bootstrap giải quyết
Dự án web nào cũng cần button, form, navigation, và typography nhất quán, và viết lại toàn bộ CSS/JavaScript đó từ đầu cho mỗi site mới là việc lặp đi lặp lại. Bootstrap đóng gói sẵn lớp đó thành một bản tải về: CSS đã compile chia theo từng phần (grid, reboot, utilities, bundle đầy đủ), cộng với một JavaScript bundle kèm Popper, để một dự án chỉ cần thêm một dependency thay vì tự ráp từng phần style và component tương tác cơ bản.
Trường hợp sử dụng tốt nhất
- •Dựng nhanh một layout trang hoàn chỉnh, vì bootstrap.css và bootstrap.bundle.js đầy đủ đã bao gồm grid, typography, và các component tương tác trong hai file.
- •Dự án chỉ cần một lớp riêng lẻ có thể chỉ link bootstrap-grid.css hoặc bootstrap-utilities.css thay vì cả bundle.
- •Trang web cần hỗ trợ right-to-left có thể dùng thẳng các bản build .rtl.css thay vì tự viết override RTL.
- •Team đã có sẵn npm, Yarn, Bun, Composer, hoặc NuGet trong stack có thể cài đặt qua đúng công cụ đó, tất cả đều được ghi trong README.
- •Người muốn đóng góp cho chính framework: repo có sẵn unit test cho JS, editor config, và Code Guide cho quy ước HTML/CSS.
Ai nên dùng — và ai nên bỏ qua
Hãy thử Bootstrap nếu bạn muốn có sẵn nền CSS và JavaScript để cài qua package manager đang dùng rồi override thay vì viết từ một stylesheet trắng, nhất là khi hỗ trợ RTL hoặc Code Guide cho việc đóng góp có ý nghĩa với bạn. Bỏ qua nếu bạn muốn viết style bằng utility class ngay trong markup mà không có component dựng sẵn để override, hoặc không muốn có JavaScript bundle đi kèm — README không nêu đường cài đặt chỉ-CSS, không JavaScript nào ngoài các bản build grid/reboot/utilities riêng lẻ.
Repo liên quan
Muốn nghe thêm một ý kiến về bootstrap?
Hỏi một AI đọc được trang này — một cú bấm là có ngay nhận định về bootstrap.