用 bootstrap 5 搭简历页应避开默认主题色、card/accordion 布局及 form-control，改用语义化 section、自定义配色、list-group 和 progress 等轻量组件，并针对性优化 print 样式以保障 pdf 导出效果。
用 Bootstrap 5 快速搭出可用简历页，别碰 bootstrap.min.css 的 CDN 默认主题色
Bootstrap 默认的 primary 蓝（#0d6efd）和 secondary 灰（#6c757d）放在简历里容易显得像后台系统页面。直接拿官方 CDN 链入就开写，十有八九会卡在“怎么看着不像人写的”这一步。
实操建议：
- 用 bootstrap.min.css + 自定义 CSS 覆盖关键色值，比换主题或改 SCSS 更快
- 把 primary 改成深灰（如 #2d3748），body 字体设为 system-ui, -apple-system, "Segoe UI" 提升可读性
- 删掉所有默认 container-fluid，统一用 container（最大宽度 1140px），避免宽屏下文字拉得太散
简历结构别套 card 和 accordion，用语义化 section + row/col 更稳
常见错误现象：用 accordion 做“工作经历”折叠项，结果手机端点不开、SEO 不收录内容；或者每个模块包一层 card，导致边框重叠、阴影堆叠，打印时全是黑边。
使用场景明确时更简单：
- “教育背景”“项目经历”这类线性内容，直接用 section 包裹，内部用 row + col-md-8 col-lg-7 控制文本宽度
- 时间轴类信息（如工作起止时间）用 small.text-muted，别塞进 badge —— badge 是状态标识，不是日期容器
- 所有链接统一加 text-decoration-none，再用 hover:text-primary（如果用 Bootstrap 5.3+ 的 CSS 变量）或自定义 hover 色
form-control 在简历页里基本没用，联系方式模块直接用 list-group + link-dark
很多人看到“联系我”就想放个表单，但静态简历页不需要后端收信——放 form 标签反而触发浏览器自动填充提示、键盘弹出逻辑错乱，手机端体验差。
参数差异注意点：
- list-group-item 默认带左右 padding，简历里要删掉：加 px-0
- 邮箱、电话这类内容，用 a href="mailto:xxx" 或 a href="tel:+86xxx"，别写死文本
- 图标别用 Bootstrap Icons 的 JS 加载方式（慢且可能失败），直接复制 SVG 到 HTML，用 me-2 控制间距
导出 PDF 时字体糊、排版崩？关键在 @media print 和 table 的回避
性能影响明显：Bootstrap 的响应式断点、box-shadow、transition 全部会在 PDF 导出时被误解析，尤其用 Chrome “另存为 PDF” 时，col 类容易塌成一列，中文字体缺失变方块。
可立即生效的调整：
- 在 里加一段 @media print，强制关闭 box-shadow、border 和 background-color
- 简历里的技能标签别用 badge 堆，改用 span + bg-light text-dark px-2 py-1 rounded，print 模式下更可控
- 绝对不要用 table 排版“技能熟练度”，改用 progress 组件（它在 print 下表现稳定）或纯文字描述
复杂点在于：PDF 导出不识别 CSS 变量，所以如果你用了 var(--bs-primary)，得在 @media print 里手动覆写成具体色值。这点容易被忽略，一导出就全变黑字白底。
