Bootstrap 5 có gì hay? Tổng quan về phiên bản mới này Update 09/2021

Có lẽ người dùng đã quá quen thuộc với Bootstrap 4 trong quá trình xây dựng các giao diện. Và tính đến thời điểm hiện tại, version này đã được 4 tuổi. Người dùng cũng khá hài lòng về các tính năng của chúng. Tuy nhiên, xét về độ hoàn hảo thì Bootstrap 4 vẫn tồn tại khá nhiều nhược điểm. Đây chính là động lực để Bootstrap 5 ra đời.

Ở thời điểm hiện tại, Bootstrap 5 mới chỉ dừng lại ở bản Alpha vẫn chưa có bản chính thức. Tuy nhiên, kể từ lúc xuất hiện, version 5 này đã khiến người dùng dậy sóng với nhiều tính năng vượt trội. Bootstrap 5 đã có sự cải thiện hơn rất nhiều so với Bootstrap 4.

Trong tương lai, Bootstrap 5 sẽ có rất nhiều thay đổi đột phá hơn nữa. Nhưng trước mắt, chúng ta cùng điểm qua những giá trị hay ho mà Bootstrap 5 Alpha này mang lại nhé.!

Điểm nổi bật ở Bootstrap 5

So với phiên bản 4, thì Bootstrap 5 có điểm nổi bật đó là đã loại bỏ toàn bộ những hạn chế, điểm lỗi thời. Người dùng tiếp cận được dễ dàng và nhanh chóng hơn. Có 2 điểm vượt trội vở Version 5 này bạn cần phải biết:

  • Đã loại bỏ jQuery không còn chút dấu vết.
  • Không còn hỗ trợ Internet Explorer. Version 5 hội tụ nhiều công cụ thân thiện, dễ dùng hơn. Chúng đã được cải biến và hoàn thiện về chất lượng Code thông qua  Javascript, những variable CSS mang tính linh hoạt và dễ dùng hơn.

Bootstrap 5 có gì hay ho đến vậy?

Để biết Bootstrap 5 có điểm gì hay ho và thú vị đến vậy, chúng ta cùng điểm qua một số điểm nổi bật dưới đây:

Giao diện trang Docs đã được thay đổi

Soi với phiên bản 4 thì trang Docs hiện tại đã thân thiện và dễ dùng hơn rất nhiều. Chúng đã được nâng cao về trải nghiệm độc. Bên cạnh đó, Version 5 cũng đổi logo Bootstrap mới. Chúng được lấy từ nguồn cảm hứng của biểu tượng chữ B được bao bọc bằng dấu ngoặc nhọn của CSS.

Home Page sở hữu thiết kế nhỏ gọn, không còn full-width giống như trước. Từ đó, Homepage sở hữu App ít hơn hẳn. Đây là lý do khiến cho content sẽ được hiển thị nhiều hơn.

Bên cạnh đó, phần sidebar cũng được cải thiện, nhỏ gọn và mở rộng thêm Component phía trong. Người dùng sẽ tiếp cận nội dung một cách nhanh chóng và dễ dàng.

jQuery và JavaScript có sự thay đổi

Điểm nổi bật ở Bootstrap 5 đó là không còn dùng jQuery. Từ đó tốc độ load trang sẽ nhanh hơn. Version 5 cũng trở nên nhẹ nhàng hơn. Mọi cải tiến đều tập trung vào việc nâng cao chất lượng code thông qua Javascript. Một bước ngoặt mới nổi trội của phiên bản này.

Version 5 sẽ cải tiến, hoàn thiện JavaScript. Tất cả đều tập trung then chốt vào chất lượng Code. Khoảng cách giữa phiên bản 4 và 5 cũng được thu hẹp dần.

Mặc khác, Plugin Button cũng được loại bỏ Toggle Button sẽ được thay bằng Checkbox và Radio button.

Thuộc tính tùy chỉnh của CSS

Điểm hay ho ở Bootstrap 5 chính là sự cải thiện về thuộc tính tùy chỉnh CSS. Điển hình CSS custom properties đã được hỗ trợ tốt hơn thể hiện qua việc nói không với IE. Chẳng hạn component .table sẽ biến đổi gần như toàn cục để style trở nên dễ hơn.

Phần Tùy biến được cải thiện

Toàn bộ phần khó hiểu sẽ được loại bỏ, thay vì đó, version 5 sẽ giải thích cặn kẽ và nhiều hơn. Người dùng có thể đọc nội dung dễ dàng. Hơn nữa, phiên bản này còn cung cấp bảng chọn màu vô cùng tiện lợi.

Cập nhật Form

Phiên bản 5, Form sở hữu 1 khu riêng tại trang Docs. Điển hình như new form docs Checkbox, radio, file, range,… Tại trình duyệt và hệ điều hành, bạn sẽ thực hiện việc tùy chỉnh mang tính thống nhất và hoàn hảo hơn.

Các tiện ích API

Toàn bộ tiện ích API đã được cải thiện hoàn toàn mới ở Version 5. Cụ thể là:

  • Hệ thống grid được nâng cấp và cải thiện
  • Bổ sung tiếp 1 tầng grid mới là xxl
  • Class .gutter đã bị loại bỏ và utilities .g* thay thế vào tương tự utilities margin/padding.
  • Hệ thống grid mới đã thế chỗ cho toàn bộ tùy chọn Layout.
  • Bổ sung vào những class cho khoảng cách theo hướng dọc.
  • Giá trị position: relative sẽ không còn mặc định ở cột nữa.

Trong tương lai, chúng ta sẽ chứng kiến từng bước thay đổi của RTL, offcanvas và vô số điều thú vị nữa. Vì vậy, bạn hãy dành thời gian để tìm hiểu Bootstrap 5 trong thời gian tới ở trang chúng tôi để cập nhật thông tin mới nhất và hữu ích.

Bạn có thể tham khảo video Bootstrap 5 dưới đây:

Bài viết đã nêu trọn vẹn thông tin tổng quan về Bootstrap 5. Nếu bạn có điều gì khúc mắc có thể để lại comment bên dưới.