快递单号输入框须用class="form-control"且type="text"，placeholder="请输入快递单号"，autocomplete="off"；查询按钮需btn btn-primary与type="button"，禁用时同步设aria-disabled="true"；结果用alert-success/danger/warning并role="alert"，轨迹表格单独渲染；移动端适配用col-12 col-md-6 col-lg-4网格，时间轴用collapse展开。
快递单号输入框必须用 form-control 且加 type="text"
Bootstrap 的表单控件样式依赖 class 名精确匹配，form-control 是基础样式载体。如果只写 class="input" 或漏掉 type，在 Safari 或旧版 Edge 中可能不触发自动聚焦/软键盘唤起，移动端用户无法顺利输入单号。
常见错误是直接套用 HTML5 新属性但忽略兼容性：
- 别用
type="search"—— 它会额外渲染 × 清空按钮，在快递场景下反而干扰操作 - 必须设
placeholder="请输入快递单号"，否则 Bootstrap 4+ 的浮动标签（floating label）不会生效 - 单号字段建议加
autocomplete="off"，避免浏览器填充历史订单号造成误提交
查询按钮要带 btn btn-primary 且禁用默认提交行为
Bootstrap 的按钮样式靠 btn + 语义类组合，仅写 btn-primary 不生效。同时，表单内按钮默认是 type="submit"，若没绑定 JS 或后端路由，会触发整页刷新，导致查询结果无法动态展示。
实操要点：
- 显式声明
type="button"，避免意外提交 - 加
disabled状态时，必须同步加aria-disabled="true"，否则屏幕阅读器无法识别 - 点击后应立刻设
disabled并改文案为“查询中…”，防止重复点击——快递接口通常有频控，重复请求大概率返回 429
响应区域要用 alert 组件而非自定义 div
快递查询结果分三种典型状态：成功（运单存在）、失败（单号无效）、异常（网络或接口超时）。Bootstrap 的 alert 类已内置颜色语义和可关闭机制，比手写 CSS 更可靠。
关键细节：
- 成功用
alert-success，失败用alert-danger，异常建议用alert-warning（非alert-info，后者常被用户忽略） - 务必包裹
role="alert"，这是无障碍访问强制要求 - 不要把整个物流轨迹表格塞进
alert里——alert只适合短提示；轨迹数据应单独用table table-sm渲染，放在 alert 下方
移动端适配得靠 col-12 col-md-6 col-lg-4 这类断点类
快递查询页的用户近 70% 来自手机，但很多人直接给 input 加 width: 100%，这会导致在 iPad 等中屏设备上过宽、留白失控。
正确做法是用 Bootstrap 网格系统约束宽度：
-
col-12：所有设备占满一行（手机竖屏） -
col-md-6：≥768px 时占半宽（平板横屏/小桌面） -
col-lg-4：≥992px 时占三分之一（标准桌面）
别忘了外层包 row 和 container，否则网格类不生效。另外，iOS 上 input 在 flex 布局中可能高度塌陷，遇到就加 min-height: calc(1.5em + 0.75rem + 2px)（对应 Bootstrap 默认 padding + border）。
最易被忽略的是物流轨迹时间轴在小屏上的折叠逻辑——它不该简单隐藏，而要用 collapse + data-bs-toggle="collapse" 实现按需展开，否则用户查不到关键节点信息。
