Bootstrap 5.3.0-alpha1 发布


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/[email protected]/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/[email protected]/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和弹出窗口的一致性问题。

更多详情可查看官方公告。


相關推薦

2023-06-01

Bootstrap v5.3.0 的稳定版本正式发布,新版本带来的变化包括: 支持黑暗模式 Bootstrap 的核心已被重写,为黑暗模式提供了支持。此外,Bootstrap 现在支持任何数量的颜色模式,允许你建立自己的自定义主题或更细微的颜色模式

2023-04-04

Bootstrap 5.3.0-alpha3 现已发布,具体更新内容如下: 修复了 node-sass/Hugo 错误的插值变量。 在calc()函数中使用 Sass 变量时,添加了对插值变量的检查,以捕获 Node Sass 的编译错误。 开始在更多组件中使用--bs-border-radius变量。

2022-09-09

Bootstrap v5.2.1 现已发布,这是一个补丁版本,主要包含了一些错误修复、文档更新和依赖性更新。 Key changes 更新了 calc() 函数,以解决 postcss-values-parser 中的一个明显的 bug,该 bug 导致源 Sass 文件在使用 React 和 PostCSS 构建时无

2022-10-26

能已正式 GA——到达稳定状态。此版本将默认 CSS 框架从 Bootstrap 4 升级到 Bootstrap 5,并为 M1 Mac 设备预置了二进制文件。此外还优化了性能,例如将 IHP 应用程序打包成 docker 镜像时,其体积从 300 MB 压缩到 80 MB。 Bootstrap 5 将

2023-11-17

BootstrapBlazor v8.0.0 已经发布,Bootstrap 样式的 Blazor UI 组件库 此版本更新内容包括: Release 2023-11-16 V8.0.0 What's Changed fix(Table): 修复单元格内溢出文本 Tooltip 未居中问题 by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/2307 f

2023-11-01

BootstrapBlazor v7.12.0 已经发布,Bootstrap 样式的 Blazor UI 组件库 此版本更新内容包括: Release 2023-10-31 V7.12.0 Bugs fix(MenuLink): 修复 MenuLink 地址为 / 时始终高亮问题 by @ray-gilbert in https://github.com/dotnetcore/BootstrapBlazor/pull/2204 fix(Count

2023-08-31

【直播预告】eBPF 到底是可观测领域的神器 or 鸡肋? BootstrapBlazor v7.10.0 已经发布,Bootstrap 样式的 Blazor UI 组件库 此版本更新内容包括: Release 2023-08-30 V7.10.0 What's Changed 破坏性更新 refactor(TableToolbarPopConfirmButton): 组件重命

2023-08-01

BootstrapBlazor v7.9.0 已经发布,Bootstrap 样式的 Blazor UI 组件库 此版本更新内容包括: Release 2023-08-01 V7.9.0 What's Changed Bugs fix(Chart): 修复 borderWidth 属性不生效问题 by @azlis in https://github.com/dotnetcore/BootstrapBlazor/pull/1474 fix(Filter):

2023-01-09

mark:包括 webstreams benchmark #45876 [ 6e3d7f8c2d] - bootstrap:优化内置快照中加载的模块 #45849 [ d181b76374] - bootstrap:使 CJS 加载器可快照 #45849 [ 508e830765] - bootstrap:将 event_target 包含到内置快照中 #45849

2023-01-30

ng[] args) {         HttpBootstrap bootstrap = new HttpBootstrap();         bootstrap.httpHandler(new HttpServerHandler() {          &n

2023-07-03

BootstrapBlazor v7.8.0 已经发布,Bootstrap 样式的 Blazor UI 组件库 此版本更新内容包括: Release 2023-07-01 V7.8.0 What's Changed 破坏性更新 chore(Table): 原属性 Searchs 更改为 Searches by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/1417

2022-10-09

BootstrapBlazor v6.11.0 已经发布,Bootstrap 样式的 Blazor UI 组件库 发布时间 2022-10-06 V6.11.0 V6.10.12 feat(#I5SO59): 组件 Collapse 重构移除 javascript 脚本降低维护成本 #I5SO59 refactor(#I5U6ZK): 组件 AnchorLink 移除 TooltipText 默认值 #I5U6ZK V6.10.1

2023-10-20

ng[] args) {         HttpBootstrap bootstrap = new HttpBootstrap();         bootstrap.httpHandler(new HttpServerHandler() {          &n

2024-02-02

BootstrapBlazor v8.2.0 已经发布,Bootstrap 样式的 Blazor UI 组件库 此版本更新内容包括: Release 2024-1-31 V8.2.0 Bugs fix(ITableColumn): 修复 Step 参数不接受 any 值问题 by @ArgoZhang in https://github.com/dotnetcore/BootstrapBlazor/pull/2718 fix(Textarea): 修