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同级，写成<table class="table table-sm">，不能套在 div 里再加<h3>日志时间字段别直接放 <code>new Date().toISOString()，用toLocaleString('zh-CN')格式化后端返回的 ISO 时间字符串（如
"2024-06-12T09:23:45.123Z"）直接插进表格，中文用户第一眼要换算时区、还要数年月日位置，体验极差。Bootstrap 不处理日期格式，这事必须前端做。错误做法：
<td>{{ log.timestamp }}</td>（Vue）或<td></td>（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，会比表格行高高出一截，视觉割裂。用户点搜索框时手指移动距离变长，操作效率下降。典型错误：只给
input加form-control-sm，但包裹它的div.input-group没加input-group-sm，导致左右 addon（如搜索图标、清空按钮）尺寸不匹配。<div class="input-group input-group-sm"> 是前提，否则 addon 高度不对齐<li>搜索按钮用 <code>btn btn-outline-secondary btn-sm，别用btn-primary——主色按钮在后台系统里应留给“新增”“导出”等关键操作- 清空按钮（×）建议用
btn btn-link p-0 text-muted，靠右绝对定位，点击区域更精准 -
INFO→bg-info text-dark（text-dark防止白字在浅蓝上不清晰） -
WARN→bg-warning text-dark -
ERROR→bg-danger（红底白字足够醒目） - 确保后端返回的 level 字段是规范大写（
"INFO"），别是"info"或"Info"，否则映射逻辑容易漏判
日志级别字段用
badge而不用label，且按 severity 映射bg-*旧项目常沿用 Bootstrap 3 的
<span class="label label-info">INFO</span>，但 Bootstrap 5 已废弃label，且badge有更合理的 padding 和字体粗细，默认居中对齐，适配日志这种短文本标签场景。错误映射：所有级别都用
bg-secondary，或 INFO/WARN/ERROR 全部用bg-danger——失去语义提示作用。日志列表真正难的不是样式，而是当条数超过 5000 行时，浏览器渲染卡顿、内存飙升——这时候得切分页或虚拟滚动，而 Bootstrap 自己不提供，得接
datatables.net或手写 IntersectionObserver，那又是另一回事了。 - 用
