Bootstrap 5 so với Bootstrap 4 – Có gì mới và có gì thay đổi?

Đội ngũ của framework CSS Bootstrap đã chính thức phát hành phiên bản mới, phiên bản ổn đinh Bootstrap 5 đã có sẵn để sử dụng. Hãy cùng xem những tính năng mới được giới thiệu này trong Bootstrap 5 là gì và sự khác biệt trong Bootstrap 5 so với Bootstrap 4.

Ngoài thay đổi nhiều về logo, chúng ta sẽ đề cập đến những khía cạnh ảnh hưởng nhiều nhất đến các dự án phát triển web trước tiên.

Có gì mới trong Bootstrap 5 dành cho Web Developers

Cũng như với bất kỳ sự thay đổi phiên bản nào, có nhiều thay đổi trong Bootstrap 5 so với Bootstrap 4. Dưới đây là danh sách những điểm khác biệt chính mà bạn cần lưu ý khi cập nhật các dự án cũ hoặc bắt đầu một dự án mới với Bootstrap 5.

Vanilla JavaScript thay cho jQuery

Kể từ khi Bootstrap được giới thiệu, nó đã sử dụng jQuery để cung cấp các tính năng động như mở rộng menu, carousel, dropdowns, v.v. Tuy nhiên, sự phụ thuộc bắt buộc vào jQuery này không được nhiều nhà phát triển muốn sử dụng Bootstrap với các framework JavaScript hiện đại yêu thích như React và Vue JS. Ở Bootstrap 5, họ đã loại bỏ sự phụ thuộc này.

Lưu ý rằng điều này không có nghĩa là không có sự phụ thuộc JavaScript trong Bootstrap 5. Các hành vi như dropdown, slider, popover, v.v trong Bootstrap 5 phụ thuộc vào Popper cũng như module vanilla JavaScript của nó. Sẽ không phải cần thêm jQuery. Nếu dự án của bạn phụ thuộc vào jQuery, bạn vẫn có thể thêm nó.

Loại bỏ hỗ trợ trên trình duyệt IE 10 và 11

Với việc Microsoft chuyển hoàn toàn sang trình duyệt Edge, Internet Explorer đang nhanh chóng mất thị phần. Hơn nữa, Edge đã áp dụng công nghệ chromium mã nguồn mở cho phép nó có tất cả các tính năng hiện đại của JavaScript và CSS ngang bằng với phiên bản mới nhất của Chrome và Firefox. Do đó, nhóm Bootstrap đã bỏ hỗ trợ cho Internet Explorer, cho phép nó cung cấp một bộ tính năng hiện đại như các biến CSS, JavaScript nhanh hơn và các API tốt hơn.

Dưới đây là danh sách đầy đủ các trình duyệt mà Bootstrap 5 không còn hỗ trợ:

• Microsoft Edge Legacy
• Internet Explorer 10 và 11
• Firefox < 60
• Safari < 10
• iOS Safari < 10
• Chrome < 60
• Android < 6

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

Nhờ bỏ hỗ trợ cho Internet Explorer, Bootstrap 5 hiện hỗ trợ các thuộc tính CSS tùy chỉnh. Trong Bootstrap 4 biến root chỉ có màu và các font chữ. Bootstrap 5 hiện cung cấp các biến CSS trong một số ít các component và tùy chọn layout. Ví dụ: component table sử dụng các biến cục bộ để tạo kiểu bảng striped, hover-able, và active dễ dàng hơn.

Mở rộng bảng màu

Nhiều framework CSS như Tailwind cung cấp một bộ bảng màu mở rộng đã khá phổ biến với các developer. Bootstrap 5 hiện đã mở rộng bảng màu của mình để bao gồm nhiều màu hơn có các sắc thái khác nhau như $blue-100, $blue-200, $blue-300, …., $blue-900. Điều này cho phép bạn dễ dàng tùy chỉnh giao diện ứng dụng của mình mà không cần rời khỏi codebase. Bạn có thể dễ dàng ghi đè những màu này bằng bảng màu của riêng mình.

Cập nhật Form Control

Bootstrap 5 bao gồm tùy chỉnh thiết kế form control. Trong Bootstrap 4, các form control sử dụng bất kỳ giá trị mặc định nào mà mỗi trình duyệt cung cấp. Trong Bootstrap 5, các form control mẫu sẽ mang lại giao diện nhất quán hơn nhiều trong tất cả các trình duyệt do thiết kế tùy chỉnh của nó.

Tất cả các form control mới này đều được xây dựng dựa trên các tên thành phần tương ứng, và do đó không cần thêm đánh dấu bổ sung cho các form control and label.

Các Utilitie API (tiện ích API)

Utility API mới đã được tích hợp vào Bootstrap 5. Bạn có thể sử dụng Sass để tạo các utility của riêng mình. Bạn cũng có thể sử dụng utility API của Bootstrap để sửa đổi hoặc loại bỏ các utility classes mặc định.

Bây giờ bạn có thể sử dụng lựa chọn state để tạo các biến pseudo-class như :hover và :focus. Ví dụ như:

Các class CSS utility đó sẽ được tạo ra tương ứng như sau:

Cải thiện hệ thống grid

Trong khi Bootstrap 5 giữ nguyên cấu trúc hệ thống grid đã được giới thiệu trong Bootstrap 4, nó được tăng cường thêm bằng cách thêm các class mới. Điều này có nghĩa là sẽ tận dụng được cấu trúc grid từ phiên bản cũ hơn sang phiên bản mới hơn.

Đây là những gì đã thay đổi trong hệ thống grid của Bootstrap 5:

• Thêm một grid mới là xxl
• Class .gutter bị thay thế bằng utilities .g*.
• Các tùy chọn layout cho form bị thay thế bằng hệ thống grid mới.
• Thêm vào các class cho khoảng cách theo chiều dọc.
• Cột sẽ không còn được đặt mặc định giá trị “postion: relative”.

Thành phần offcanvas mới

Một thành phần offcanvas mới đã được thêm vào Bootstrap 5, có thể được sử dụng để tạo các sidebar mở rộng để điều hướng hoặc cho các giỏ hàng hoặc menu offcanvas. Các thành phần offcanvas này có thể được đặt ở bên trái, bên phải hoặc dưới cùng của khung nhìn và có thể được định cấu hình bằng các data attribute hoặc các API JavaScript.

Accordion mới

Bootstrap 5 bổ sung hỗ trợ cho thành phần .accordion hoàn toàn mới. Accordion mới bao gồm các Icon Bootstrap có biểu tượng chữ V biểu thị trạng thái và có khả năng click. Bạn cũng có thể sử dụng .accordion-flush để loại bỏ màu nền mặc định, đường viền và góc tròn để hiển thị  accordion từng cạnh với container cha.

Floating label trong các Form Input

Floating label (nhãn nổi) mới cũng đã được thêm vào trong bootstrap 5. Thao tác này tương tự như các UI framework khác chẳng hạn như MDB. Các validation cho Form cũng hoạt động giống như floating label.

Hỗ trợ RTL

Bootstrap 5 hiện bao gồm hỗ trợ RTL. Hỗ trợ RTL (từ phải sang trái) có nghĩa là bạn có thể xây dựng trang web bằng các ngôn ngữ như tiếng Ả Rập, tiếng Do Thái, tiếng Pashto, tiếng Ba Tư, tiếng Urdu và tiếng Sindhi. Cách viết của các ngôn ngữ này bắt đầu từ bên phải của trang và tiếp tục sang bên trái, điều này đòi hỏi nó phải có cài đặt phong cách cụ thể riêng để phù hợp với thiết kế tổng thể của bạn. Bây giờ Bootstrap 5 có hỗ trợ RTL trong build, bạn sẽ có thể sử dụng các phiên bản RTL của tệp Bootstrap CSS để tạo các trang web RTL. Kiểm tra docs và xem thử ví dụ cho RTL.

Dễ dàng customization & theming

Bootstrap 5 cung cấp phần Customize mới mở rộng trên trang theming của v4 với nhiều nội dung và code snippet hơn để xây dựng các tệp Sass của Bootstrap’ source ban đầu. Một dự án bắt đầu bằng npm cũng được cung cấp để giúp bạn tùy chỉnh Bootstrap nhanh hơn. Thiết lập Bootstrap với Parcel hiện cũng đã có tài liệu hướng dẫn.

Namespaced data attributes

Bootstrap sử dụng các thuộc tính HTML để kích hoạt các hành vi JavaScript. Trong Bootstrap 5, tất cả các thuộc tính như vậy đã được đổi tên từ data-* thành data-bs-*. Bạn sẽ cần phải tìm tất cả thay thế tất cả các data attribute như vậy khi chuyển từ Bootstrap 4 sang 5, tuy nhiên về sau điều này sẽ giữ cho việc đặt tên data attribute của Bootstrap tách biệt với cách đặt tên của bất kỳ thư viện nào khác hoặc của riêng bạn.

Popper.js v2

Tooltips và popovers trong Bootstrap được cung cấp bởi Popper.js. Trong Bootstrap 5, v2 của Popper.js đã được thông qua, mang lại những thay đổi nhỏ:

• Đã xóa tùy chọn “offset” khỏi Tooltip/Popover và Dropdown. Bây giờ có thể sử dụng nó trong tham số “popperConfig”.
• “fallbackPlacement” được đổi thành “fallbackPlacements”

SVG Icon Library

Bootstrap hiện cung cấp thư viện SVG gồm hơn 1.000 biểu tượng dễ dàng tích hợp vào code của bạn. Bạn có thể thêm các biểu tượng này bằng inline code hoặc SVG sprite. Một phiên bản font chữ web cũng sẽ được giới thiệu với bản phát hành ổn định của thư viện icon này. Có thể sử dụng cùng với Bootstrap 4.

Bootstrap 5 so với Bootstrap 4 – Khi nào sử dụng?

Dưới đây là một số lý do tại sao bạn muốn sử dụng Bootstrap 4 trong các dự án hiện tại của mình:

• Dự án của bạn cần hỗ trợ cho IE 10 và IE 11.
• Dự án của bạn phụ thuộc vào jQuery và bạn không cần các tính năng mới của Bootstrap 5.
• Bạn đang sử dụng Bootstrap 4 và chưa muốn đáp ứng các thay đổi mới của Bootstrap 5.

Và đây là những lý do tại sao bạn muốn chuyển sang Bootstrap 5 trong các dự án mới của mình hoặc cập nhật lại các dự án cũ:

• Bạn đang sử dụng React hoặc Vue.js và muốn sử dụng Bootstrap mà không phụ thuộc vào jQuery.
• Bạn muốn sử dụng các tính năng mới của Bootstrap như bảng màu mở rộng, hệ thống grid nâng cao, các utilitie tùy chỉnh, RTL,…

Bootstrap là một trong những framework CSS responsive phổ biến nhất mà các web agency và web developer yêu thích. Với những thay đổi mới trên của Bootstrap 5, KANMAR hy vọng các bạn có thể cập nhật thêm những kiến thức mới và áp dụng tốt vào dự án của mình.