Zen 27/12/2022 11:13:59
Bootstrap 5.3.0-alpha1 ra mắt, tha hồ vọc vạch các chế độ màu
Bootstrap 5.3.0-alpha1 có gì mới?
Thông qua thuộc tính data-bs-theme trên phần tử root <html>, Bootstrap 5.3.0-alpha1 đem đến chế độ đa màu mới, giúp các coder có thể tạo ra các theme có tuỳ chỉnh chi tiết màu bất kỳ cho 2 phiên bản sáng và tối.
Cụ thể, các coder có thể dùng mixin Sass mới, color-mode() để tạo các kiểu chế độ tối với một thuộc tính dữ liệu (mặc định) hoặc một truy vấn media. Cái sau hữu ích nếu bạn chỉ có hai chế độ màu và muốn thay đổi chế độ màu tự động qua CSS.
Bootstrap 5 mới nhất đã được update bảng màu với các biến Sass, CSS và tiện ích mới. Màu trước và nền có thêm các màu thứ cấp, thứ ba và nhấn mạnh.
Các màu theme được bổ sung, bao gồm các màu cho nền và đường viền tinh thế hơn, màu text cho nền tối hơn. Một số thành phần cũng được thiết kế lại để dùng các biến mới trong Sass nguồn và CSS biên dịch để phản hồi với các thay đổi chế độ màu mới.
Những thay đổi nổi bật khác
- Thêm các biến CSS mới cho các breakpoint lưới, màu link, nút đóng, link cảnh báo, biểu mẫu và nhiều hơn thế nữa. Ngoài ra, nhiều phần tử cũng đã được update để dùng nhiều biến CSS chung hơn như --bs-border-color để phản hồi tốt hơn khi thay đổi chế độ màu sắc.
- Các biểu mẫu nổi cũng được update để nổi bật hơn và giờ bao gồm cả hỗ trợ cho trường text.
- Thêm nhiều tiện ích mới, bao gồm fw-medium, overflow và object-fit , z-index… Ngoài ra, update border-radius để bạn có thể kết hợp .rounded-{top|bottom|start|end} với .rounded-{0-5|pill|circle}.
