Những điều bạn nên biết về Bootstrap 4

Bootstrap cho ra mắt phiên bản mới mạnh mẽ và đầy đủ hơn. Bài viết sẽ giới thiệu về những thay đổi đáng kể nhất

Nhỏ hơn, nhẹ hơn

Bạn có biết câu nói: “Xóa code chính là debug code” ko? Bootstrap trong trường hợp này đã hoàn thành xuất sắc quá trình refactor của mình bằng cách giảm thiểu file size, phiên bản 4.0.0 alpha bootstrap.min.css chỉ có 88KB. Nhẹ hơn, load nhanh hơn!

Sass thay vì LESS

Bootstrap 3 sử dụng LESS là engine để tiền xử lý (preprocessor) cho CSS, nhưng đến phiên bản 4, bootstrap đã được refactor để sử dụng SASS. SASS dễ sử dụng đồng thời cung cấp nhiều khả năng tùy biến hơn. Đồng thời, nhờ vào việc Libsass Sass Compiler được viết bằng C/C++ mà bootstrap 4 sẽ được biên soạn(compile) nhanh hơn trước nhiều

Hệ grid mới

Chắc hẳn ai dùng bootstrap cũng biết hệ thống grid để hiển thị layout trên các thiết bị có độ phân giải khác nhau. Bootstrap 3 hiện tại có 4 dạng grid dành cho cột, .col-xs-XX dành cho mobile, .col-md-XX dành cho tablet, .col-md-XX dành cho máy tính, và .col-lg-XX dành cho máy tính có kích cỡ màn hình lớn hơn. Bootstrap 4 tiến thêm một bước và giới thiệu dạng grid thứ 5 col-xl-XX giúp developer xây dựng layout hoạt động tốt trên tất cả các thiết bị

Bỏ support IE8, mở ra chân trời mới

Bootstrap 4 bỏ support IE8 là một nước đi thông minh vì nó giúp loại bỏ hàng loạt polyfill cũng như chuyển sang đơn vị CSS tương đối.
Thay vì pixels, bootstrap 4 sẽ sử dụng REMs và EMs, điều này đồng nghĩa với việc ta có thể xây dựng website mà mọi thành phần đều có thể thay đổi kích thước phù hợp với kích thước màn hình mà không làm hư thiết kế.

Bootstrap card

Bootstrap giới thiệu component mới là cards. Cards sẽ thay thế wells, thumbnails và panels trong bootstrap 3. Để biết card là gì, đồng thời khám phá những tính năng thú vị của card, bạn có thể xem card docs.

Support flexbox

Có thể nói flexbox sẽ là tương lai của css. Để nói về flexbox phải cần 1 bài riêng, hiểu đơn giản flexbox là 1 trong những tiêu chuẩn WC3 mới giúp developer xây dựng layout trên những applications hiện đại. Flexbox đảm bảo các thành phần nằm trong container được sắp xếp, căn chỉnh và phân phối hợp lý ngay cả khi kích thước của thành phần chưa được biết.

Flexbox thích hợp nhất khi sử dụng với responsive design, vì nó cung cấp container linh hoạt có thể mở rộng hoặc co lại tùy thuộc vào không gian được cung cấp. Bạn có thể tìm hiểu về flex-box tại đây

Lưu ý là chỉ sử dụng flexbox khi bạn không phải support cho IE9 thôi nhé vì IE9 không hỗ trợ flexbox module.

Các class tiện ích mới

Một trong những tính năng ăn tiền và tiết kiệm thời gian nhất khi dùng bootstrap là việc bootstrap tích hợp các class tiện ích( như .clear-fix)

Bootstrap 4 tiến thêm 1 bước với việc giới thiệu spacing class để thay đổi margin và padding cho các thành phần. Ở bootstrap 3, bạn phải thay đổi nhưng style này trong file css hoặc tự tạo class tiện ích
Nhưng class tiện ích này được đặt tên theo luật như sau:
[margin hoặc padding]-[hướng]-[kích thước]
Ví dụ để set margin là 0 cho tất cả các hướng của 1 thành phần ta chỉ cần đơn giản thêm .m-all-0cho thành phần đó

Tài liệu tham khảo

Cũng như Bootstrap 3, Bootstrap 4 có hệ thống document vô cùng tốt, nếu bạn muốn tìm hiểu nhiều hơn nữa về bootstrap 4, có thể tham khảo tại đây