7 điều bạn phải biết về Bootstrap 4

Là 1 back-end developer, tôi còn nhớ nỗi khổ khi phải đụng tới HTML, CSS khi vào nghề. Tôi ghét cay ghét đắng khi bị giao task chỉnh sửa layout cho đến khi tôi biết đến Bootstrap. Bootstrap là vị cứu tinh của đời tôi, tuy đây là front-end framework đầu tiên tôi tìm hiểu nhưng tôi thấy rằng đây là framework đầy đủ tính năng và được support mạnh mẽ nhất.

Sắp tới, bootstrap sẽ cho ra mắt phiên bản mới mạnh mẽ và đầy đủ hơn. Mặc dù mới ở giai đoạn apha stage, nhưng tôi nghĩ các developer của dự án boostrap đã đạt được những bước tiến ấn tượng. Trong bài viết này tôi sẽ giới thiệu về những thay đổi mà bản thân thấy là đáng kể nhất, và tôi tin là bạn, cũng như tôi, sẽ thấy update lên phiên bản 4 là một đầu tư đúng đắn (mặc dù vậy, chỉ nên dùng ở môi trường production khi bootstrap ra mắt phiên bản chính thức nhé)

1. 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. Nếu bạn sử dụng phiên bản alpha, bạn sẽ thấy rằng, bạn sẽ thấy rằng nếu so sánh với phiên bản ổn định gần nhất của bootstrap 3 (3.3.7), 121KB (file bootstrap.min.css), thì phiên bản 4.0.0 alpha bootstrap.min.css chỉ có 88KB. Nhẹ hơn, load nhanh hơn!

2. 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. Bản thân tôi, với quá trình sử dụng cả 2, thấy rằng 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

3. 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ị

grid-system-e1444291529140

4. 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ế.
Quan trọng nhất là IE8 có thể ra đi thanh thản, và tôi sẽ không còn phải test xem layout có hoạt động trên IE8 không

5. 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.

bs-card

6. Support flexbox

Tôi tin rằng 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.

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

1 trong những tính năng ăn tiền và tiết kiệm thời gian cho tôi 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-0 cho thành phần đó

new-utility-classes-for-spacing

Kết luận

Bootstrap 4 hiện đang ở phiên bản alpha 4. Sử dụng phiên bản alpha ở môi trường production là 1 bước đi mạo hiểm và tôi không khuyến khích điều đó nhưng với trải nghiệm hiện tại và ủng hộ đông đảo từ cộng đồng đã chứng minh phiên bản hiện tại khá hoàn chỉnh để sử dụng. Và với việc các developer của bootstrap khuyến khích cộng tác viên dừng đóng góp vào Bootstrap 3 để tập trung vào phiên bản chính thức của Bootstrap 4, việc thay đổi sang bootstrap 4 chỉ còn là vấn đề thời gian.

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

(Nguồn ảnh: Internet)

Lam Kim

Lam Kim

Hi there,
I am a fast learner and love to explore new things. Sometimes, I write about technology and life as a developer
Lam Kim

Comments

comments