 |
 |
Bootstrap là gì?
Bootstrap là nền tảng mã nguồn mở ra đời cuối năm 2011 được dùng phát triển responsive websites dễ dàng và nhanh chóng với phương pháp mobile-first. Bootstrap dựa trên HTML, CSS và JS. Bootstrap giúp thiết kế Frontend hiệu quả.
Tại sao dùng Bootstrap?
- Nhanh và dễ hơn
- Theo phong cách Mobile-first
- Miễn phí có thể tải tại địa chỉ
- Hỗ trợ bởi nhiều trình duyệt
- Thiết kế Responsive
Bootstrap 5 được giới thiệu vào năm 2020 với nhiều tính năng cải tiến so với Bootstrap 4.
Một số class được thêm vào Bootstrap 5:
- gx-* (Các class kiểm soát chiều dài horizontal/column gutter)
- gy-* (Các classes kiểm soát chiều dài vertical/row gutter)
- g-* (Các classes kiểm soát chiều dài horizontal & vertical gutter)
- rows-cols-auto
Bảng sau đây liệt kê các điểm khác nhau giữa Bootstrap 4 và Bootstrap 5
| BASIS OF | BOOTSTRAP 4 | BOOTSTRAP 5 |
| Hệ thống lưới (Grid System) | Có 5 tier (xs, sm, md, lg, xl). | Có 6 tier (xs, sm, md, lg, xl, xxl). |
| Màu (Color) | Có các màu giới hạn | Có các màu mở rộng được thêm vào |
| Jquery | Hỗ trợ jquery và các plugins | Không hỗ trợ Jquery và chuyển sang hỗ trợ vanilla JS |
| Internet Explorer | Bootstrap 4 hỗ trợ cả IE 10 và 11. | Bootstrap 5 không hỗ trợ IE 10 và 11. |
| Các thành phần Form | Radio buttons, checkboxes có giao diện khác nhau ở các hệ điều hành và trình duyệt | Giao diện của các thành phần form sẽ nhất quán trong các hệ điều hành và trình duyệt |
| Utilities API | Không thay đổi được các tiện ích (utilities) | Cho phép thay đổi và tự tạo các tiện ích to modify and also create our own utility |
| Gutter | Dùng .glutter với fontsize tính theo px | Dùng .g* với fontsize tính theo rem |
| Vertical Classes | Columns có thể được định vị tương đối | Columns không thể định vị tương đối |
| Bootstrap Icons | Bootstrap 4 không có các biểu tượng SVG riêng và phải dùng font-awesome | Bootstrap 5 có các biểu tượng riêng dạng SVG |
| Jumbotron | Hỗ trợ | Không hỗ trợ |
| Navbar | Có thuộc tính inline-block | Thuộc tính Inline-block bị bỏ |
| Bộ tạo site tĩnh | Bootstrap 4 dùng phần mềm Jekyll | Bootstrap 5 dùng phần mềm Hugo |
Tác giả: Vũ Thị Diệu Thư
BM CNTT Đà Nẵng
