对照基准:Bootstrap 5.3.x 的组件清单、JS API 习惯与无障碍基线。 飞立(plui)的目标不是复制 Bootstrap 的源码,而是达到同等的覆盖面与可用度;风格与命名按本项目的既定约束走(白底黑线、.plui- 前缀、工具类用 Tailwind 断点前缀写法)。
状态说明:已实现 = 能力对等可用;部分实现 = 主体可用但缺 Bootstrap 的部分能力(已注明);未做 = 明确不做(已注明原因)。
| Bootstrap 5 组件 | plui 对应 | 状态 | 差异与说明 |
|---|---|---|---|
| Reboot(全局重置) | base/reset.css + base/elements.css | 部分实现 | 自研重置,保留极简风格;不含 Bootstrap 的 reboot 全部细节(如 abbr 样式已单列) |
| 栅格 Grid(12 列、行、列、沟槽、order、offset、row-cols、嵌套) | .plui-row / .plui-col-* / .plui-g-* / .plui-order-* / .plui-offset-* / .plui-row-cols-* | 已实现 | 断点沿用 Bootstrap 5 的 sm/md/lg/xl/xxl 取值;工具类层的 grid-cols 是另一套(Tailwind 命名) |
| 容器 Container | .plui-container + 断点变体 | 已实现 | — |
| 按钮 Button(含 outline、size、block、禁用、状态) | .plui-btn + 变体 | 已实现 | 用 [disabled] 属性表达禁用,不用 .disabled 类 |
| 按钮组 Button group(含竖排、尺寸、勾选式) | .plui-btn-group / -vertical / -lg / -sm / .plui-btn-check | 已实现 | — |
| 表单控件 Form controls(文本、选择、文件、范围、颜色、只读、明文) | .plui-form-control / .plui-form-select / .plui-form-color / .plui-form-range / .plui-form-control-plaintext | 已实现 | — |
| 尺寸 Form control sizing | .plui-form-control-sm/-lg、.plui-form-select-sm/-lg | 已实现 | — |
| 浮动标签 Floating labels | .plui-form-floating | 已实现 | — |
| 表单校验 Form validation(状态类、反馈文案、was-validated) | .plui-is-valid / .plui-is-invalid / .plui-valid-feedback / .plui-invalid-feedback | 部分实现 | 只有状态样式与反馈文案;未做 was-validated 提交后整体校验态,也不内置校验规则引擎(框架只管样式与状态类) |
| 表单布局 Form layout(group、row、label、text、check、switch、inline) | .plui-form-group / .plui-form-row / .plui-form-label / .plui-form-text / .plui-form-check / .plui-form-switch / .plui-form-check-inline | 已实现 | — |
| 输入组 Input group | .plui-input-group / .plui-input-group-text / .plui-input-group-check / .plui-input-group-has-validation | 已实现 | — |
| 复选与单选 Checkbox & radio | .plui-form-check / .plui-form-check-input / .plui-form-check-label | 已实现 | — |
| 卡片 Card(含 header/footer/img/水平卡片) | .plui-card 及各子块 | 已实现 | 视觉是白底黑线,无阴影 |
| 手风琴 Accordion | .plui-accordion* | 已实现 | 由 Collapse 组件驱动,JS 见下 |
| 折叠 Collapse | .plui-collapse / .plui-show | 已实现 | — |
| 轮播 Carousel | .plui-carousel* | 已实现 | 未做触摸滑动(drag)与自动播放的 prefers-reduced-motion 联动暂停 |
| 下拉 Dropdown | .plui-dropdown* | 已实现 | 键盘支持 ↑↓/Esc/Tab;未做 Popper 级别的定位(Bootstrap 用 Popper,我们不引第三方库) |
| 导航 Nav & Tabs | .plui-nav* / .plui-nav-tabs* / .plui-nav-pills* / .plui-nav-underline / .plui-nav-fill | 已实现 | — |
| 导航栏 Navbar(含 collapse、expand 断点) | .plui-navbar* | 已实现 | — |
| 面包屑 Breadcrumb | .plui-breadcrumb* | 已实现 | — |
| 分页 Pagination | .plui-pagination* / .plui-page-item / .plui-page-link | 已实现 | — |
| 列表组 List group | .plui-list-group* | 已实现 | — |
| 提示框 Alerts | .plui-alert* | 已实现 | — |
| 徽标 Badge | .plui-badge* | 已实现 | — |
| 进度条 Progress | .plui-progress* | 已实现 | — |
| 加载指示 Spinners(border、grow) | .plui-spinner-border / .plui-spinner-grow | 已实现 | — |
| 占位块 Placeholders | .plui-placeholder*(含 glow/wave/尺寸) | 已实现 | — |
| 吐司 Toast | .plui-toast* | 已实现 | — |
| 工具提示 Tooltip | .plui-tooltip* | 已实现 | 自研定位引擎:四向翻转 + 越界回退;未做 Popper 的 preventOverflow / 虚拟元素 / 箭头精确贴合 |
| 弹出框 Popover | .plui-popover* | 已实现 | 同上 |
| 模态框 Modal | .plui-modal* | 已实现 | 含遮罩、滚动条锁定、焦点陷阱、焦点归还 |
| 离屏面板 Offcanvas | .plui-offcanvas* | 已实现 | Bootstrap 5.2 才有的组件,本版补齐 |
| 滚动监听 Scrollspy | .plui-scrollspy-* | 已实现 | — |
| 表格 Tables(含 striped/hover/bordered/small/responsive/caption/active) | .plui-table* | 已实现 | — |
| 关闭按钮 Close button | .plui-btn-close / .plui-modal-close / .plui-offcanvas-close | 已实现 | — |
| 过渡与动效 Transitions | .plui-fade / .plui-collapsing | 已实现 | 尊重 prefers-reduced-motion |
| 工具类 Utilities | 8 个分类 8026 个类名 | 已实现 | 命名走 Tailwind 断点前缀写法,与 Bootstrap 的工具类命名不同(这是本项目的既定约束) |
| 辅助类 Helpers | .plui-ratio* / .plui-sticky-* / .plui-fixed-* / .plui-clearfix / .plui-invisible / .plui-float-* / .plui-vh-100 等 | 已实现 | — |
| 阴影 Shadows | 有 shadow 工具类 | 部分实现 | 极简风格默认不用阴影,工具类保留但页面默认不启用 |
| 图表等 Extended features(Bootstrap Icons 等) | 无 | 未做 | 不打包图标字体/第三方资源,图标由 CSS 线条或 Unicode 几何字符绘制 |
| Bootstrap 5 JS 能力 | plui 对应 | 状态 | 差异与说明 | |
|---|---|---|---|---|
| 构造函数实例化 | new plui.Modal(el, cfg) 等 12 个组件 | 已实现 | 与 new bootstrap.Modal(el) 习惯一致 | |
| 静态 getInstance / getOrCreateInstance | 每个组件都有 | 已实现 | — | |
| show / hide / toggle / dispose | 全部组件 | 已实现 | — | |
| 事件命名 | show.bs.plui / shown / hide / hidden(+ slide.bs.plui) | 部分实现 | 命名空间用 .bs.plui;同时另发 show.bs.plui.<组件名> 供精确监听。未做 Bootstrap 的 data-bs-* 属性别名,只认 data-plui-* | |
| 事件冒泡与取消 | 是(冒泡;show/hide 可 preventDefault 中止) | 已实现 | — | |
| data-api 自动初始化 | data-plui-toggle / data-plui-target / data-plui-dismiss / data-plui-slide / data-plui-spy / data-plui-ride | 已实现 | — | |
| 异步回调(relatedTarget 等) | show(relatedTarget),e.detail.relatedTarget | 已实现 | — | |
| 焦点管理(模态、离屏) | 焦点陷阱 + Esc + 焦点归还 | 已实现 | — | |
| 键盘可达 | Tab/Esc/方向键(轮播、下拉、标签页、菜单) | 部分实现 | 标签页的方向键切换只做了「激活即切换」模型,未做roving tabindex 的完整 ARIA 标签页键盘模式 | |
| 滚动条锁定 | body.plui-scroll-locked + padding-right 补偿 | 已实现 | — | |
| Popper 浮层定位 | 自研定位引擎 | 部分实现 | 只做四向翻转与视口回退,未做虚拟元素、preventOverflow、箭头随位 | |
| 触摸手势(Carousel 滑动、拖拽排序) | 无 | 未做 | 框架只保证点击与键盘路径;触摸滑动需要额外的指针事件与惯性逻辑,暂不实现 | |
| 工具提示/弹出框的 trigger 模式(click/manual/toggle) | 固定 hover + focus | 部分实现 | 未做 `trigger: 'click' | 'manual'` 等配置 |
| 插件注册表(全局 API 命名空间、jQuery 插件形式) | window.plui 单一命名空间 | 部分实现 | 按约束不提供 jQuery 插件形式 |
| 项目 | 状态 | 说明 |
|---|---|---|
| CSS 变量与四层令牌 | 已实现 | 原始 / 语义 / 组件 / 主题四层 |
| 暗色模式 | 已实现 | data-plui-theme="dark" 或跟随 prefers-color-scheme;只覆盖语义层令牌 |
| 颜色模式(多主题切换按钮、主题色) | 部分实现 | 只做明暗两套,未做自定义主题色与主题切换按钮组件 |
| RTL | 部分实现 | 组件层做了逻辑属性与 RTL 适配,未做完整的 RTL 构建产物(需在 RTL 环境下另跑一次构建) |
| 打印样式 | 已实现 | 隐藏浮层、露出链接地址、避免卡片跨页截断 |
| 减少动效偏好 | 已实现 | prefers-reduced-motion 下动画与过渡降到 0.01ms |
| 高对比度模式 | 已实现 | forced-colors: active 下补边框、焦点描边与系统色 |
| 色彩对比 WCAG AA | 已实现(可判定项) | 正文 21:1、次级 7.5:1、弱化 4.8:1;暗色另配一套达标值。未做自动化无障碍检测与 WCAG 认证 |
| 屏幕阅读器隐藏文本 | 已实现 | .plui-sr-only(及断点变体) |
| 构建期自检 | 已实现 | build/check.mjs 10 项检查 + 构建内 CSS/JS 语法自检 + 体积预算 |
| 按需裁剪构建 | 已实现 | build/mini.mjs,示例页裁剪后约 70 KB |
| RTL 专用产物 / 未压缩的按需版 / npm 包 | 未做 | 待 D17 / D23 拍板 |
src/common.js。本页由 build/build-docs.mjs 从同名 Markdown 生成,请修改 .md 后重新生成,不要手工编辑本文件。