Bootstrap 5 日志表格需加 table-striped、table-hover、table-sm 才具备可读性；时间字段须用 toLocaleString('zh-CN') 格式化；搜索框需 input-group-sm 统一尺寸；级别用 badge 按 severity 映射背景色。

用 Bootstrap 5 渲染日志表格时，table 类必须加 table-striped table-hover table-sm

纯 Bootstrap 默认的 table 没有斑马纹、悬停反馈和紧凑行高，后台日志列表密密麻麻，不加这些类根本没法快速扫读。尤其 table-sm 能把行高从默认 48px 压到约 32px，100 条日志能多显示 2–3 屏。

常见错误是只加 table，结果每行间距过大、颜色全白、鼠标移上去毫无反应——用户会以为没加载完或卡了。

• table-striped：奇偶行自动着色（tbody tr:nth-child(odd) 背景变浅灰）
• table-hover：仅对 tbody tr 生效，thead 或独立 tr 不响应
• table-sm 必须和 table 同级，写成 ，不能套在 div 里再加

  日志时间字段别直接放 new Date().toISOString()，用 toLocaleString('zh-CN') 格式化

  后端返回的 ISO 时间字符串（如 "2024-06-12T09:23:45.123Z"）直接插进表格，中文用户第一眼要换算时区、还要数年月日位置，体验极差。Bootstrap 不处理日期格式，这事必须前端做。

  错误做法：

  （Vue）或 （EJS），没做任何转换。
  • 用 new Date(log.timestamp).toLocaleString('zh-CN', { hour12: false }) 得到类似 "2024/6/12 上午9:23:45"
  • 如果后端已转为本地时间戳（秒级或毫秒级数字），直接 new Date(log.timestamp * 1000) 再格式化
  • 避免用 moment.js：日志页通常不需要时区切换、相对时间等复杂功能，原生 API 更轻量

  查日志时加 form-control-sm 和 input-group-sm 控制搜索框尺寸

  后台页面顶部搜索栏如果用默认大小的 input 和 button，会比表格行高高出一截，视觉割裂。用户点搜索框时手指移动距离变长，操作效率下降。

  

  VPS Bootstrap

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

  下载

  典型错误：只给 input 加 form-control-sm，但包裹它的 div.input-group 没加 input-group-sm，导致左右 addon（如搜索图标、清空按钮）尺寸不匹配。

  • 是前提，否则 addon 高度不对齐
  • 搜索按钮用 btn btn-outline-secondary btn-sm，别用 btn-primary——主色按钮在后台系统里应留给“新增”“导出”等关键操作
  • 清空按钮（×）建议用 btn btn-link p-0 text-muted，靠右绝对定位，点击区域更精准

  日志级别字段用 badge 而不用 label，且按 severity 映射 bg-*

  旧项目常沿用 Bootstrap 3 的 INFO，但 Bootstrap 5 已废弃 label，且 badge 有更合理的 padding 和字体粗细，默认居中对齐，适配日志这种短文本标签场景。

  错误映射：所有级别都用 bg-secondary，或 INFO/WARN/ERROR 全部用 bg-danger——失去语义提示作用。

  • INFO → bg-info text-dark（text-dark 防止白字在浅蓝上不清晰）
  • WARN → bg-warning text-dark
  • ERROR → bg-danger（红底白字足够醒目）
  • 确保后端返回的 level 字段是规范大写（"INFO"），别是 "info" 或 "Info"，否则映射逻辑容易漏判

  日志列表真正难的不是样式，而是当条数超过 5000 行时，浏览器渲染卡顿、内存飙升——这时候得切分页或虚拟滚动，而 Bootstrap 自己不提供，得接 datatables.net 或手写 IntersectionObserver，那又是另一回事了。

  {{ log.timestamp }}