Bootstrap v5.3.0-alpha1 现已发布，此版本带来了新的颜色模式支持、带有变量和实用程序的扩展调色板等。具体更新内容如下：
深色模式和彩色模式
Bootstrap现在支持通过 root<html>元素上的data-bs-theme属性来明确选择创建多种颜色模式。开发团队选择了一个数据属性的解决方案，这样你就可以创建任何数量的主题，而不仅仅是浅色和深色。使用一个新的Sass mixin，color-mode()，通过数据属性（默认）或媒体查询来生成深色模式样式。如果你只有两种颜色模式，并希望通过CSS自动改变颜色模式，后者是很有用的。
如果你使用CDN或 starter template，可在<html>元素中添加带有light或dark值的data-bs-theme属性，就可以使用light或dark主题。
<!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>
还可以使用 Sass 构建 Bootstrap 并自定义如何使用颜色模式，阅读文档以了解更多信息，甚至可以创建自定义颜色模式。
扩展的调色板
大幅度的调色板更新，其中包含新的 Sass 变量、CSS 变量和实用程序来 boot。前景色和背景色有新的二级、三级和强调色可供选择，而主题颜色已经扩展到包括它们的微妙的背景颜色、微妙的边框颜色和更深的文本颜色。重建了一些组件（如列表组和警报）以在其源 Sass 和编译的 CSS 中使用这些新变量，以便它们响应颜色模式的变化。
以及一些其他变化：
- 为网格断点、链接颜色、关闭按钮、警报链接、表单等增加了新的CSS变量。此外，许多组件已被更新为使用更多的全局CSS变量，如--bs-border-color，以更好地响应不断变化的颜色模式。
- 浮动表单已被更新为更可靠，现在包括对文本区的适当支持。
- 增加了许多新的实用工具，包括fw-medium、overflow和object-fit utilities、z-index等等。另外，border-radius 工具已经更新，这样就可以把.rounded-{top|bottom|start|end}和.rounded-{0-5|pill|circle}结合起来。
- 修正了一些Popper tooltip和弹出窗口的一致性问题。
更多详情可查看官方公告。
为您推荐与 bootstrap 相关的帖子：
暂无回复。
