Bootstrap仅提供购物车界面样式，需自行编写JavaScript实现增删、数量更新和价格计算；推荐用table展示商品列表，小屏改用list-group而非table-responsive；数量控制应使用input-group包裹带min/step的number输入框和按钮；状态提示用alert/badge但需避免与表格样式冲突；移动端需扩大点击区域并处理touch延迟。

Bootstrap 本身不提供购物车逻辑，只负责样式和基础交互；你得自己写 JavaScript 管理商品增删、数量更新、价格计算，再用 Bootstrap 的栅格、卡片、表格和按钮类来组织界面。别指望 bootstrap.js 自动帮你算总价或持久化数据。

用 Bootstrap 表格展示购物车商品列表

购物车最核心的视图是商品列表，用

+ Bootstrap 的 table、table-striped、table-hover 类最直观，比手写 flex 卡片更易对齐单价/数量/操作列。

注意：别用 table-responsive 包裹整个购物车——它会让表格在小屏下横向滚动，但用户更需要的是“每行折叠成卡片式布局”。真要响应式，建议小屏改用 list-group 或自定义 CSS 媒体查询重排，而不是依赖 table-responsive。

示例关键结构：

商品	单价	数量	小计

用 Bootstrap 按钮和输入框控制商品数量

数量操作不是简单放两个 就完事。常见错误是直接给 input type="number" 加 form-control，但没限制 min="1" 和 step="1"，导致用户输负数或小数，后续 JS 计算出错。

推荐组合：

• 用
  包裹，左侧 −
• 中间 （记得加 value 初始值）
• 右侧 +

别用 input 的原生上下箭头做主要交互——iOS Safari 对 type="number" 支持差，且焦点容易丢失；按钮点击更可控。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载

用 Bootstrap Alert 和 Badge 提示购物车状态

空购物车、库存不足、优惠生效这些状态信息，别堆文字。用

显示“购物车为空”，用 缺货 标在商品名旁，比纯文本更抓眼球。

注意：alert 默认有 padding 和边框，如果嵌在表格里会破坏对齐。此时该用 text-muted small 配合 fw-light，或者单独抽离到表格上方容器中，避免和 table 的 border-collapse 冲突。

另外，别把错误提示（如“库存只剩 2 件”）写死在 HTML 里——必须由 JS 根据接口返回的 stock 字段动态插入/移除 badge 或 alert 元素。

别忽略移动端点击区域和 touch 延迟

在手机上点“删除”按钮经常失灵，不是 JS 绑定错了，而是按钮太小、没适配 touch 事件。Bootstrap 的 btn 默认 padding 在移动端偏小，建议加 py-2 或 px-3 提升点击热区。

更关键的是：别只监听 click。iOS Safari 有 300ms 点击延迟，用户快速连点会丢事件。要么用 addEventListener('touchstart', ...)，要么引入 fastclick，或者直接用 Bootstrap 5+ 内置的 data-bs-toggle 配合自定义事件委托——但后者只适用于 modal/dropdown 这类内置组件，购物车操作还得自己写。

真实项目中，最容易被跳过的其实是“删除后是否需要 confirm”。PC 上可以省，但移动端误触率高，if (confirm('确定删除？')) { ... } 虽土，但有效。