Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Bootstrap 4 đây rồi! Có gì mới không?

by
Length:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Bootstrap, một trong những framework cho front-end phổ biến nhất trong giới thiết kế web, vừa mới phát hành phiên bản rất được chờ đợi, phiên bản 4! Hãy cùng xem có gì mới, những gì đã bị loại bỏ, và những gì bạn có thể làm với nó.

Phiên bản 4.0.0

Phiên bản này của Bootstrap, theo như Mark Otto và nhóm chia sẻ, là một "phiên bản được viết lại hoàn toàn của dự án". Điều đó hứa hẹn nhiều sự cải tiến, và đồng thời mở ra rất nhiều điều cho bạn nếu bạn đang có kế hoạch chuyển đổi những dự án hiện có sang phiên bản mới. Không có "sự thay đổi đáng kể", nhưng có rất nhiều điều cần quan tâm. Đã đến lúc khám phá những tính năng quan trọng nhất.

Bootstrap 4 đây rồi!

1. Mới: Mặc định Flexbox

Thông thường layout của Bootstrap sử dụng float. Trong các phiên bản gần đây flexbox đã được sử dụng để thay thế, nhưng với sự hỗ trợ rộng rãi của trình duyệt flexbox giờ đây là nhân tố tạo nên grid của Bootstrap. Công nghệ CSS bên dưới Bootstrap grid không tạo ra một sự khác biệt đáng kể, nhưng flexbox cung cấp tính linh hoạt hơn float, vì vậy grid dựa trên flexbox đi kèm với một vài tuỳ chọn. Ví dụ, sử dụng flexbox có nghĩa là bạn có thể định nghĩa một cột và các anh chị em của nó tự động giãn kích thước quan nó.

2. Mới: Tập trung vào sự hỗ trợ của trình duyệt

Động thái hướng đến việc sử dụng flexbox thật sự đã thúc đẩy một thay đổi khác: hỗ trợ trình duyệt. Bootstrap v4 đã chính thức loại bỏ sự hỗ trợ cho Internet Explorer 8, 9 và iOS 6. Điều này có nghĩa là các trang Bootstrap của bạn sẽ chỉ hỗ trợ IE10 + và iOS 7+. Cần phải lưu ý điều đó.

3. Mới: LESS sang Sass

Những người yêu thích Sass sẽ vui mừng khi nghe rằng Bootstrap giờ đây chính thức là một dự án ưu tiên Sass. Nếu bạn tải về source Bootstrap, bạn sẽ tìm thấy một thư mục gọi là "Sass", trong đó bạn sẽ thấy tất cả các phần cần thiết. "_variables.scss" chứa tất cả các biến và các thiết lập mà bạn cần, sau đó "bootstrap.scss" chứa tất cả các chỉ thị @import, cho phép bạn tuỳ biến Bootstrap của bạn bằng cách include hoặc loại bỏ bất kỳ thành phần nào mà bạn muốn.

4. Mới: REM

Ngoại trừ media query, Bootstrap v4 đã loại bỏ pixel và sử dụng các đơn vị tương đối như rem. Điều này làm cho kích thước co giãn tốt hơn, vì vậy nếu bạn chưa từng sử dụng rem để thay thế các đơn vị bây giờ sẽ là thời điểm tuyệt vời để xem các tài liệu sau đây:

5. Mới: Breakpoint mới

Bên cạnh việc Bootstrap loại bỏ float, tính đáp ứng của nó bây giờ cũng đi kèm với một breakpoint mới. Từ bây giờ, bạn sẽ có thể tùy biến năm breakpoint mặc định này:

6. Mới: Reboot

Sự thay đổi đáng chú ý tiếp theo đó là tập tin reset. "Reboot" tận dụng reset của Normalize, chỉ sử dụng các bộ chọn nguyên tố, sau đó xây dựng dựa trên nó với một số style thiết lập lại dựa trên lớp (bạn sẽ thấy .table.table-bordered cùng với một vài cái khác).

7. Bỏ: Custom Builder

Nếu bạn đã từng tải về một phiên bản Bootstrap trước đó, bạn sẽ quen với online customiser. Công cụ này cho phép bạn chọn và bỏ chọn các thành phần khác nhau của framework Bootstrap để tạo ra phiên bản lý tưởng của bạn.

Vâng, nó đã biến mất.

Thay vào đó, Bootstrap giờ đây tập trung vào cấu trúc mô đun riêng của nó, cho phép bạn tận dụng Sass từ phía bạn, chỉ bao gồm những gì bạn cần và biên dịch kết quả cuối cùng có thể triển khai của bạn.

Do it yourself
Tự làm

8. Bỏ: Glyphicons

Bootstrap không còn bao gồm Glyphicons. Thay vào đó, bạn nên tự tìm cho riêng mình và bao gồm chúng theo bất kỳ cách nào bạn thấy phù hợp. Nhóm Bootstrap khuyến khích các bộ icon sau, chúng tôi khuyên bạn nên triển khai dưới dạng SVG thay vì sử dụng các biểu tượng font trên web:

Iconics thumbs-up
biểu tượng bàn tay của Iconic

9. Bỏ: Grunt

Các phiên bản trước của Bootstrap hỗ trợ Grunt để tự động hoá nhiều tác vụ; bây giờ thì nó đã không còn. Thay vào đó, Bootstrap bây giờ đi kèm với một loạt các tập lệnh NPM mà bạn sẽ tìm thấy trong tập tin "package.json". Bạn có thể sử dụng chúng để làm những việc như giám sát sự thay đổi trong các tập tin Sass, thực hiện kiểm tra lint trên JavaScript của bạn hoặc đơn giản là chạy npm dist để làm tất cả mọi thứ và biên dịch một phiên bản phân phối của trang web đã hoàn thành của bạn.

Để biết thêm chi tiết về cách Bootstrap và Node.js làm việc hãy xem tài liệu công cụ biên dịch hoặc xem các hướng dẫn sau:

Tóm tắt

Cùng với những thay đổi chính này, có một số thay đổi nhỏ cho phiên bản Bootstrap mới nhất. Những người yêu thích các thành phần như panel, thumbnail, và well sẽ thất vọng khi biết rằng chúng đã bị loại bỏ. Tuy nhiên, họ đã mở đường cho một thành phần bao gồm tất cả gọi là "card", đây thật sự là một cải tiến lớn. Bạn có thể đọc tất cả về các thay đổi này và những thứ khác, trên trang Migration.

Hãy theo dõi để có thêm các hướng dẫn và các khóa học về Bootstrap 4 trên Tuts+, và tôi sẽ gặp lại bạn lần sau!

Tài nguyên hữu ích

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.