Cập nhật Bootstrap mới nhất

Thứ hai - 26/12/2022 23:43

Bootstrap 5.3.0-alpha1 vừa mới ra mắt vào đúng dịp lễ Giáng sinh. Bản cập nhật Bootstrap mới nhất này mang tới chế độ màu mới, bảng màu phong phú với các biến, tiện ích phong phú và nhiều hơn thế nữa.

Bootstrap 5 mới nhất

Nội dung nổi bật ở Bootstrap mới nhất

Chế độ tối và màu mới

Bootstrap giờ hỗ trợ lựa chọn các chế độ đa màu rõ ràng qua thuộc tính data-bs-theme trên phần tử root <html>. Ví dụ ở đây chọn giải pháp thuộc tính data để bạn có thể tạo theme bất kỳ thay vì chỉ sáng và tối. Ở đây 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.

Chế độ Dark Mode

Nếu đang dùng CDN hoặc mẫu cho người mới bắt đầu, dùng các chế độ màu mới rất đơn giản. Thêm thuộc tính data-bs-theme với các giá trị light hoặc dark vào phần tử <html> và bạn sẽ dùng theme sáng hoặc tối.

<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

Mở rộng bảng màu

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.

Chế độ Color Mode

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}.
Sửa một số vấn đề về tính nhất quán của tooltip Popper và cửa sổ bật lên.