Phân Biệt Giữa Bootstrap 4 Và Bootstrap 5 - FPT Polytechnic

Trang chủ » Bootstrap 5 Có Gì Mới » Phân Biệt Giữa Bootstrap 4 Và Bootstrap 5 - FPT Polytechnic

Có thể bạn quan tâm

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ỉ www.getbootstrap.com
  • 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

Chia sẻ 0

Từ khóa » Bootstrap 5 Có Gì Mới