SuperAPI AI 工具集

bootstrap-components

通用与其它

查看项目

更新于 10-16 01:14

技能介绍

用途:该技能用于回答 Bootstrap 5.3 组件的使用问题,如创建模态框、导航栏不折叠、轮播自动播放、响应式布局等,提供组件用法模式、JavaScript 初始化要求与无障碍最佳实践。

主要能力:涵盖交互组件(手风琴、轮播、折叠、下拉菜单、模态框、Offcanvas、气泡框、滚动监听、Toast、工具提示)与静态组件(警告框、徽章、面包屑、按钮、按钮组、卡片、关闭按钮、列表组、导航栏、导航与标签页、分页、占位符、进度条、加载动画)。交互组件中,工具提示与气泡框必须显式 JS 初始化且依赖 Popper.js,Toast 需 JS 调用 show();模态框、轮播、折叠、下拉、滚动监听可通过数据属性工作,JS 初始化为可选。静态组件主要依赖 CSS 与 HTML。

必要用法:工具提示与气泡框需初始化,例如 document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));气泡框同理用 new bootstrap.Popover(el)。可用 bootstrap.bundle.js(含 Popper)或在 bootstrap.js 前单独引入 Popper。定位异常时设置 container: 'body',模态框内的气泡框可设 container: '.modal-body'。

适用场景:使用 Bootstrap 5.3 构建响应式界面、调试组件行为、补充无障碍属性时。

限制:同一时间仅支持一个模态框,不支持嵌套;模态框内 autofocus 属性无效,需监听 shown.bs.modal 后手动 focus;动态改变模态框高度后需调用 modal.handleUpdate();禁用按钮上的工具提示需用带 tabindex="0" 的包装元素。资料未提供收费、价格或平台信息。