Trong bài viết này, chúng ta sẽ thảo luận về Sự khác biệt giữa Bootstrap 3 và Bootstrap 4. Hiện tại, Bootstrap 4 là phiên bản mới nhất của Bootstrap. Bootstrap phiên bản mới đã đưa ra một số thay đổi quan trọng, thêm các thành phần mới, loại bỏ các thành phần khác
Có lẽ Bootstrap là lựa chọn hàng đầu của các lập trình viên front-end. Như chúng ta đã biết Bootstrap là một khung nguồn mở đáng tin cậy để phát triển một trang web và ứng dụng hiện đại một cách nhanh chóng. Khung HTML, CSS và JS phổ biến nhất để phát triển các trang web đáp ứng
Bootstrap cung cấp cấu trúc cơ bản của HTML và CSS với các lớp được xác định trước, giúp bạn xây dựng chức năng nhanh chóng và dễ dàng với khả năng đáp ứng của thiết bị. Do đó, Nó tiết kiệm rất nhiều lần. Ví dụ: không cần phải bắt đầu phát triển từ đầu
Sự khác biệt chính giữa Bootstrap 3 so với Bootstrap 4
1. Thay đổi toàn cầu
Đã chuyển từ LESS sang SASS cho các tệp CSS nguồn. Bởi vì SASS mạnh hơn LESS. Ví dụ: SASS có chức năng như toán tử logic, vòng lặp, truy vấn phương tiện lồng nhau, mixin, mở rộng lớp và nhiều chức năng khác. Do đó, SASS mang lại sự thoải mái tốt hơn
SASS giúp bạn sắp xếp hợp lý các bảng định kiểu lớn và giúp dễ dàng chia sẻ thiết kế trong dự án. Bạn cũng có thể đọc về hướng dẫn chính thức của SASS
Bootstrap 4 được chuyển từ px sang rem làm đơn vị CSS chính của Bootstrap. Tuy nhiên, px vẫn được sử dụng cho truy vấn phương tiện
Kích thước phông chữ chung tăng từ 14px lên 16px
Global ComponentBootstrap 3Bootstrap 4Tệp CSS nguồnLESSSCSSPrimary CSS UnitpxremMedia Queries UnitpxpxGlobal Font Size14px16pxDefault font-familyHelvetica Neue, Helvetica, Arial, sans-serifSử dụng phông chữ hệ thống, ưu tiên thứ 2 với dự phòng cho Helvetica Neue, Arial và sans-serif
2. Hệ thống lưới
Bootstrap 4 hiện diện lên đến 5 hệ thống lưới [______3, sm, md, lg, xl]. Trong khi bootstrap 3 có 4 hệ thống lưới [xs, sm, md, lg]
Bootstrap 4 đã loại bỏ xs vì đây là điểm ngắt thấp nhất. Tuy nhiên, Bootstrap 4 đã giới thiệu rem3 bao gồm tất cả các thiết bị bắt đầu từ điểm dừng thấp hơn
GridBootstrap 3Bootstrap 4Grid Hệ thống lưới bậc 4 [xs, sm, md, lg]hệ thống lưới 5 [*, sm, md, lg, xl]Các cột bù đắpSử dụng lớp rem4 để bù đắp các cột.
e. g. rem5Sử dụng lớp rem6 để bù cột.
e. g. rem7
Bootstrap 3 Kích thước lưới
Bảng sau đây cho thấy các tùy chọn lưới Bootstrap 3 khác nhau hoạt động như thế nào với các kích thước khung nhìn khác nhau
Thiết bị siêu nhỏ Điện thoại [