Bootstrap 5.3.9

Bootstrap 5.3.9

💡 原文英文,约400词,阅读约需2分钟。
📝

内容提要

Bootstrap 5.3.9 发布,新增最大宽度 1320px 的 .modal-xxl 大尺寸模态框;占位符动画支持减少动效偏好;修复日期时间输入内边距。JavaScript 方面修复轮播触摸处理、无激活指示器报错和 ScrollSpy 平滑滚动,并保留工具提示与弹出框属性中的原始文本。文档方面用 Pagefind 替换 Algolia 搜索,恢复侧边栏示例焦点轮廓,修正无障碍属性并补充示例说明。

🔎

延伸解读

新增 .modal-xxl 尺寸的实用考量

Bootstrap 5.3.9 新增 .modal-xxl 类,在 xxl 断点下最大宽度为 1320px。使用时需将其添加到 .modal-dialog 上,与现有尺寸类用法一致。若项目自定义了模态框宽度,可通过新的 $modal-xxl Sass 变量调整。注意该宽度仅在 xxl 断点生效,小屏幕下仍遵循响应式规则,避免在窄屏上强行使用导致布局溢出。

减少动效偏好对占位符动画的影响

占位符的发光和波浪动画现在会遵循 prefers-reduced-motion 设置,前提是 $enable-reduced-motion 为启用状态(默认启用)。这意味着当用户系统开启“减少动效”时,这些动画将不再播放。对于需要保留动画的项目,可检查该 Sass 变量配置;但关闭后可能影响无障碍体验,需权衡使用。

JavaScript 修复的实际影响

本次修复了轮播在无 Pointer Events 浏览器中的触摸处理,避免轻点被误判为滑动;同时修复了无激活指示器时的报错。ScrollSpy 平滑滚动现在支持点击导航链接内的子元素(如 span 或图标)。工具提示和弹出框会保留 data-bs-title 与 data-bs-content 中的原始文本,例如 9.90 不再被转为 9.9,空标题也不会中断初始化。

文档搜索更换与示例修正

v5 文档搜索已从 Algolia DocSearch 替换为 Pagefind,索引基于 v5 文档构建,搜索结果更聚焦于 v5 内容。同时恢复了侧边栏示例的下拉焦点轮廓,修正了下拉菜单和分页示例的无障碍属性,并补充了可访问名称、可变宽度列、垂直间距下的列断点及圆角容器内表格等说明。这些改动主要提升文档的可用性和示例准确性。

❓

Q&A

Bootstrap 5.3.9 新增的模态框尺寸是什么?

新增了 .modal-xxl 尺寸,在 xxl 断点下最大宽度为 1320px。可以像其他模态框尺寸类一样添加到 .modal-dialog 上,也可以通过新的 $modal-xxl Sass 变量自定义宽度。

Bootstrap 5.3.9 如何让占位符动画支持减少动效偏好?

更新了占位符的发光和波浪动画,使其在启用 $enable-reduced-motion(默认启用)时遵循 prefers-reduced-motion 设置。

Bootstrap 5.3.9 修复了哪些 JavaScript 问题?

修复了轮播触摸处理(在不支持 Pointer Events 的浏览器中,点击不再被视为滑动,滑动方向保持一致)、轮播无激活指示器时的错误、ScrollSpy 点击导航链接内元素(如 <span> 或图标)时的平滑滚动问题,并保留了工具提示和弹出框 data-bs-title 和 data-bs-content 属性中的原始文本(如 9.90 保持为 9.90,空标题不再中断初始化)。

Bootstrap 5.3.9 文档搜索有什么变化?

用 Pagefind 替换了 Algolia DocSearch,搜索现在使用基于 v5 文档构建的索引,确保结果仅针对 v5。

Bootstrap 5.3.9 在文档方面做了哪些无障碍和示例改进?

恢复了侧边栏示例的下拉菜单焦点轮廓,修正了下拉菜单和分页示例中的无障碍属性,澄清了可访问名称、可变宽度列、带垂直间距的列分隔以及圆角容器中的表格,并添加了嵌套折叠示例,修复了模态框、离画布和弹出框示例及选项描述。

如何安装 Bootstrap 5.3.9?

可以通过 npm 安装:npm i bootstrap@v5.3.9,或前往 v5.3 文档页面获取文档和下载。

🏷️

标签

➡️

继续阅读