别直接用 Bootstrap 默认色值，应覆盖 primary 为深灰（#2d3748）、字体设为 system-ui，并统一用 container；禁用 JS、card、accordion 和打印不友好属性，用语义化 section+row 布局及自定义 print 样式确保 PDF 正确导出。
别直接用 Bootstrap 官方 CDN 的默认色值
直接引入 bootstrap.min.css 后写简历，大概率会得到一张“后台系统风”页面——primary 蓝（#0d6efd）和 secondary 灰（#6c757d）在简历场景里缺乏人味，视觉上像在填工单。这不是配色不好，而是语义错位。
实操建议：
- 只引 CSS，别加
bootstrap.bundle.min.js—— 简历页不需要 modal、dropdown 或 Popper - 用
<style></style>块覆盖关键变量，例如：:root { --bs-primary: #2d3748; --bs-body-font-family: system-ui, -apple-system, "Segoe UI"; } - 删掉所有
container-fluid，统一用container（最大宽度 1140px），避免宽屏下段落被拉散 - 字体大小别依赖
fs-5这类 utility，直接设p和h3的font-size，更可控
别套 card 和 accordion 做简历结构
用 card 包「教育经历」、用 accordion 折叠「项目经验」，看起来模块化，但实际埋了三类坑：打印 PDF 时内容被截断、手机端点不开、SEO 不收录折叠内容。
真实使用场景只有两个：屏幕浏览需清晰分块，PDF 导出需线性流式布局。语义化 section + row/col 更稳：
- 每个大模块（如「技能」「工作经历」）用
<section class="mb-5"></section>，靠 margin 控制呼吸感 - 技能项用
list-group或纯ul+badge，轻量且易打印 - 时间轴类内容（如工作经历）用
row内嵌两列：col-auto放年份，col放描述，不依赖绝对定位 - 进度条展示熟练度？用
<div class="progress"> 即可，别套额外 wrapper <h3>打印 PDF 时样式崩溃的常见原因</h3> <p>Chrome “另存为 PDF” 或用 puppeteer 渲染时，突然出现文字重叠、边框变黑、空白页，往往不是代码逻辑问题，而是 Bootstrap 默认 print 样式没被压制。</p> <p>关键动作：</p> <ul> <li>在自定义 <code><style></style>末尾加@media print规则，例如：@media print { .navbar, .btn, .d-none { display: none !important; } body { font-size: 12pt; color: #000; } } - 禁用所有
box-shadow和border-radius，PDF 渲染器对这些支持不稳定 - 避免用
position: fixed做侧边导航——打印时它会重复出现在每一页顶部 - 如果用了
list-group-item，手动设page-break-inside: avoid防止条目被切开
Resume、Creative、Grayscale 模板怎么选
这三个是目前工程可用性最强的 Bootstrap 单页模板，但“可用”不等于“开箱即用”：
-
Resume的侧边导航依赖js/resume.js里的滚动监听，若想换成IntersectionObserver，得重写监听逻辑，不是改个 class 就行 -
Creative自带 jQuery + ScrollReveal，如果你项目已用 Vue/React，JS 层要剥离，否则可能冲突焦点或触发重复动画 -
Grayscale的_variables.scss最干净，颜色/字体/断点全可配，但你得本地跑 Sass 编译——如果只是静态简历页，不如直接用 CDN +<style></style>覆盖来得快
真正省时间的做法：从零搭 container + row 结构，抄一段 Grayscale 的配色变量进 <style></style>，比调模板配置更快。复杂点在于打印样式和字体 fallback 链，这两处容易被忽略，但决定最终交付质量。
