Home-theater-designers
Bootstrap 5 đã có những thay đổi lớn, bao gồm cả việc giảm hỗ trợ Internet Explorer (IE) và phụ thuộc jQuery. Được phát triển bởi Twitter, Bootstrap là khung CSS phổ biến nhất trên thế giới. Khung giao diện người dùng nguồn mở đang xem xét định vị chính nó cho tương lai và điều này đã chứng kiến nó tạo ra những thay đổi đột phá trong v5.
Bootstrap’s drop cho IE đã khiến nó trở thành công cụ phát triển web đầu tiên làm được điều này. Động thái này diễn ra khi 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.
Đọ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.
1. Hỗ trợ 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ã.
Có liên quan: Tìm hiểu cách tạo một phần tử trong jQuery
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ó tiền tố là -b để ngăn chặn xung đột với CSS của bên thứ ba.
Có hai loại biến có sẵn: biến gốc và biến thành phần.
Các biến gốc 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 _root.scss và là một phần của các tệp 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ụ thể. Chúng rất hữu ích để tránh thừa kế ngẫu nhiên các kiểu trong các thành phần như bảng lồng nhau.
3. Hệ thống lưới được cải thiện
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, dựa trên hệ thống hiện có thay vì thay đổi hoàn toàn. Một số thay đổi là:
- Lớp máng xối ( .những cậu bé ) đã được thay thế thành một tiện ích ( .NS* ) giống như lề và đệm
- 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 là vị trí: tương đối
4. Tài liệu cải tiến
Tài liệu đã được cải tiến với nhiều thông tin hơn, đặc biệt là khi nói đến 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 hiện có giao diện mới và khả năng tùy biến tốt hơn.
Giờ đây, 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 kho lưu trữ mẫu.
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 ngụ ý rằng bạn có thể dễ dàng tạo kiểu màu của mình mà không cần phải rời khỏi cơ sở mã của bạn. 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. Kiểm soát biểu mẫu được cải thiện
Bootstrap đã cải thiện các điều khiển biểu mẫu, nhóm đầu vào và hơn thế nữa.
Trong v4, Bootstrap đã sử dụng các điều khiển biểu mẫu 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, 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 điều khiển biểu mẫu 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. Bootstrap 5 Thêm API Tiện ích
Tiếp theo các thư viện CSS mới 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 tạo động lực trong cộng đồng phát triển và nhóm bootstrap đã chú ý đến. Trước đó, nhóm đã bổ sung quy định cho các tiện ích trong v4 bằng cách sử dụng toàn cầu $ enable- * các lớp học. Trong v5, họ đã thay đổi cách tiếp cận API và một 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 Người trợ giúp.
7. Thư viện biểu tượng Bootstrap mới
Bootstrap hiện tự hào có thư viện biểu tượng SVG mã nguồn mở của riêng mình với hơn 1.300 biểu tượng. Nó được tạo tùy chỉnh cho các thành phần của khuôn khổ nhưng bạn vẫn có thể làm việc với chúng trong bất kỳ dự án nào.
Vì chúng là ảnh SVG, chúng có thể nhanh chóng mở rộng quy mô 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 trên mực nước biển:
$ npm i bootstrap-iconsCài đặt Bootstrap 5
Bạn có thể đi tới Trang tải xuống chính thức của Bootstrap 5 nếu bạn muốn cài đặt nó. Nếu bạn muốn bắt kịp với bản phát triển mới nhất, bạn có thể sử dụng trên mực nước biển để kéo nó:
$ npm i bootstrap@next
Tại thời điểm viết bài này, khung đang ở phiên bản Beta 3. Điều này có nghĩa là phần mềm an toàn để sử dụng nhưng vẫn đang trong quá trình phát triển. Vui lòng đưa ra phản hồi cho nhóm và thực hiện bất kỳ đóng góp nào cần thiết.
Đăng lại Đăng lại tiếng riu ríu E-mail Giới thiệu về các thành phần web và kiến trúc dựa trên thành phầnChúng ta hãy xem xét các thành phần web phổ biến và xem tại sao chúng lại hữu ích.
Đọc tiếp Chủ đề liên quan- Lập trình
- Phát triển web
- JavaScript
- CSS
Jerome là Nhân viên viết bài tại MakeUseOf. Anh ấy bao gồm các bài báo về Lập trình và Linux. Anh ấy cũng là một người đam mê tiền điện tử và luôn theo dõi ngành công nghiệp tiền điện tử.
Xem thêm từ Jerome DavidsonTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
chương trình để mở tệp .rarBấm vào đây để đăng ký