NỘI DUNG BÀI VIẾT
Nếu bạn đang phát triển các trang web và ứng dụng bằng cách sử dụng framework Bootstrap CSS, đây là những tính năng mới trong Bootstrap 5.
Bootstrap 5 đã có những thay đổi lớn, bao gồm cả việc ngừng hỗ trợ Internet Explorer (IE) và phụ thuộc jQuery. Được phát triển bởi Twitter, Bootstrap là framework CSS phổ biến nhất trên thế giới.
Động thái của Bootstrap khi ngừng hỗ trợ IE khiến thị phần của Internet Explorer tiếp tục giảm, chỉ chiếm chưa đến 3% trong tổng số các trình duyệt web.
Hãy đọc tiếp để biết thêm những cải tiến nào đã được thực hiện đối với Bootstrap và chúng ảnh hưởng đến bạn như thế nào nhé!
1. jQuery
Bootstrap sẽ không sử dụng thư viện jQuery nữa. Thay vào đó, nhóm phát triển đã cải thiện thư viện JavaScript để thực hiện thay đổi này. Sự phụ thuộc jQuery không nhất thiết là một điều xấu trong Bootstrap.
Trên thực tế, sự ra đời của jQuery đã thay đổi hoàn toàn cách sử dụng JavaScript. Nó đơn giản hóa các tác vụ viết bằng JavaScript mà nếu không sẽ phải mất nhiều dòng mã.
Bất chấp tất cả những điều này, nhóm nghiên cứu đã quyết định loại bỏ nó. Điều này đi kèm với lợi ích của các tệp nguồn nhỏ hơn và thời gian tải trang cao hơn. Đây là một thay đổi cần thiết sẽ giúp Bootstrap có được một phong cách thân thiện hơn trong tương lai.
Kích thước tệp nguồn đã trở nên nhẹ hơn 85KB JavaScript được rút gọn và đây là chìa khóa vì Google coi thời gian tải trang cho các trang web trên thiết bị di động là một yếu tố xếp hạng.
Vì việc sử dụng jQuery không còn cần thiết trong Bootstrap 5 nữa, bạn vẫn có thể sử dụng nó nếu muốn. Cũng cần lưu ý rằng tất cả các plugin JavaScript vẫn có sẵn.
2. Thuộc tính tùy chỉnh CSS
Bằng cách bỏ hỗ trợ Internet Explorer, các thuộc tính CSS tùy chỉnh (biến) có thể được sử dụng. IE không hỗ trợ các thuộc tính tùy chỉnh – đây chỉ là một lý do khiến nó kìm hãm các nhà phát triển web trong một thời gian dài.
Thuộc tính tùy chỉnh CSS làm cho CSS linh hoạt hơn và có thể lập trình được. Các biến CSS được thêm tiền tố -bs để tránh xung đột với CSS của bên thứ ba.
Có hai loại biến có sẵn: biến root và biến component.
Các biến root có thể được truy cập ở bất cứ nơi nào Bootstrap CSS được tải. Các biến này nằm trong tệp _root.scss và là một phần của tệp dist đã biên dịch.
Các biến component được sử dụng làm biến cục bộ trong các thành phần cụ thể. Chúng rất hữu ích để tránh kế thừa ngẫu nhiên các kiểu trong các thành phần như bảng lồng nhau.
3. Grid
Do có một số vấn đề khi nâng cấp từ phiên bản 3 lên 4, lần này Bootstrap 5 vẫn giữ lại phần lớn hệ thống. Một số thay đổi như:
- Lớp gutter (.gutter) đã được thay thế thành một tiện ích (.g *) giống như margin và padding
- Các lớp khoảng cách dọc cũng đã được bao gồm
- Các cột không còn được mặc định thành position: relative
4. Documentation
Tài liệu đã được cải tiến với nhiều thông tin hơn, đặc biệt là khả năng tùy chỉnh. Một vấn đề phổ biến là với nhiều trang web sử dụng Bootstrap, bạn có thể xác định ngay rằng trang đó đang sử dụng Bootstrap. Bootstrap 5 giờ đây có giao diện mới và khả năng tùy biến tốt hơn.
Bạn có thể tùy chỉnh chủ đề của mình một cách linh hoạt hơn để không phải mọi trang web hoặc ứng dụng đều giống nhau. Trang chủ đề v4 thực sự đã được mở rộng với nhiều nội dung và đoạn mã hơn để xây dựng trên các tệp Sass (bộ xử lý trước CSS phổ biến). Bạn cũng có thể tìm thấy một dự án npm mới bắt đầu trên nền tảng GitHub có sẵn dưới dạng template.
Bảng màu cũng đã được mở rộng trong phiên bản 5. Hệ thống màu tích hợp mở rộng giúp bạn có thể dễ dàng tạo kiểu màu của mình. Nhiều công việc cũng đã được thực hiện để cải thiện độ tương phản màu sắc, bao gồm cả việc bổ sung chỉ số độ tương phản màu sắc trong tài liệu màu Bootstrap.
5. Form Control
Bootstrap đã cải thiện các Form Control, Input Group và hơn thế nữa.
Trong v4, Bootstrap đã sử dụng các Form Control tùy chỉnh ngoài các giá trị mặc định được cung cấp bởi mỗi trình duyệt. Trong v5, tất cả chúng hiện đã được tùy chỉnh. Tất cả các nút radio, checkbox, file, range và hơn thế nữa để cung cấp cho chúng giao diện và hành vi giống nhau trên các trình duyệt khác nhau.
Các Form Control mới không còn chứa các đánh dấu nhiều màu sắc không cần thiết, mà thay vào đó, tập trung vào các tính năng thiết kế tiêu chuẩn và hợp lý.
6. Thêm API tiện ích
Giống như Tailwind CSS, Bootstrap hiện cũng đang thêm một thư viện tiện ích. Nhóm Bootstrap nói rằng họ rất vui khi thấy các nhà phát triển khác đang “thách thức cách chúng tôi đã xây dựng trên web trong hơn một thập kỷ qua. ”
Các tiện ích đang có động lực trong cộng đồng phát triển và nhóm Bootstrap đã chú ý đến. Trước đó, nhóm đã bổ sung điều khoản cho các tiện ích trong v4 bằng cách sử dụng các lớp $enable-*. Trong v5, họ đã thay đổi cách tiếp cận API và ngôn ngữ và cú pháp mới trong Sass. Điều này sẽ cung cấp cho bạn sức mạnh để tạo các tiện ích mới trong khi vẫn có thể xóa hoặc sửa đổi các giá trị mặc định đã cho.
Như một cách để tổ chức tốt hơn, một số tiện ích có trong phiên bản 4 đã được chuyển đến phần Helpers.
7. Thư viện Icon mới
Bootstrap tự hào vì họ có thư viện biểu tượng SVG mã nguồn mở với hơn 1.300 biểu tượng.
Vì là hình ảnh SVG, chúng có thể nhanh chóng mở rộng kích thước và có thể được triển khai theo nhiều cách và cũng được tạo kiểu bằng CSS.
Bạn có thể cài đặt các biểu tượng bằng npm:
$ npm i bootstrap-icons
Cài đặt Bootstrap 5
Bạn có thể truy cập vào trang chủ Bootstrap 5 để tải xuống và sử dụng hoặc sử dụng lệnh npm:
$ npm install bootstrap
Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
