Bootstrap 5 la gì

Nếu bạn đang phát triển các trang web và ứng dụng bằng cách sử dụng khung 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 tiếp tục hỗ trợ Internet Explorer (IE) và jQuery phụ thuộc. Được phát triển bởi Twitter, Bootstrap là framework CSS phổ biến nhất trên thế giới

Trạng thái của Bootstrap khi IE không hỗ trợ khiến cho 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

Vui lòng đọc tiếp để biết thêm những tiến trình 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ư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 tốt để thực hiện thay đổi này. Sự phụ thuộc jQuery không thiết yếu nhấ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 nhiệm 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 nguồn tệp nhỏ hơn và thời gian tải trang cao hơn. Đây là một sự thay đổi cần thiết sẽ giúp Bootstrap 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 choc trang web trên thiết bị di động là một yếu tố

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. CSS CSS Properties

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 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ể thiết lập chương 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ó sẵn hai loại biến. biến gốc và biến thành phần

Có thể truy cập các biến gốc ở bất kỳ nơi nào Bootstrap CSS được tải xuống. Các biến này nằm trong tệp _root. scss and is a part of the file dist biên dịch

Các biến thành phần được sử dụng để làm biến cục bộ trong các thành phần công cụ 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. lưới

Bootstrap 5 la gì
Bootstrap 5 la gì

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ữ nguyên phần lớn hệ thống. A number change as

  • Lớp máng xối (. máng xối) đã được thay thế thành một tiện ích hữu ích (. g *) same as margin and padding
  • Các lớp khoảng cách dọc cũng đã được bao gồm
  • The column is not default to position. có liên quan

4. tài liệu

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ể khẳng đị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 theo 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ã khác để xây dựng trên các tệp Sass (bộ xỿ Cử lử lý c). Bạn cũng có thể tìm thấy dự án npm mới bắt đầu trên nền tảng nền tảng GitHub có sẵn dưới dạng mẫu

Table color cũng đã được mở rộng trong phiên bản 5. Hệ thống hợp màu 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 bất lợi khi thực hiện cải thiện khả năng tương phản màu sắc, bao gồm cả cảnh vệ bổ sung chỉ số tương phản màu sắc trong tài liệu màu bootstrap màu

5. Kiểm soát hình dạng

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 tùy chọn Form Control bên 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 đều đã được tùy chỉnh. Tất cả các nút radio, hộp kiểm, tệp, phạm vi 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 dấu đá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ỽ

6. Thêm tiện ích API

Giống như Tailwind CSS, Bootstrap hiện cũng đang bổ sung 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ó hiệu lực trong cộng đồng phát triển và nhóm Bootstrap đã được 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 ra 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 đã

Như một cách để tổ chức tốt hơn, một số tiện ích có sẵn trong phiên bản 4 đã được chuyển đến phần Người trợ giúp

7. Icon library new

Bootstrap 5 la gì
Bootstrap 5 la gì

Bootstrap tự hào vì chúng có thư viện biểu tượng SVG mã nguồn mở với hơn 1. 300 icon

Vì là hình ảnh SVG, chúng có thể nhanh chóng mở rộng kích thước và có thể được phát triển khai thác theo nhiều cách và cũng được tạo kiểu bằng CSS