内容提要
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 文档页面获取文档和下载。