别直接用 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
• 用 块覆盖关键变量，例如：

  :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 更稳：

• 每个大模块（如「技能」「工作经历」）用
  ，靠 margin 控制呼吸感
• 技能项用 list-group 或纯 ul + badge，轻量且易打印
• 时间轴类内容（如工作经历）用 row 内嵌两列：col-auto 放年份，col 放描述，不依赖绝对定位
• 进度条展示熟练度？用
  即可，别套额外 wrapper

  打印 PDF 时样式崩溃的常见原因

  Chrome “另存为 PDF” 或用 puppeteer 渲染时，突然出现文字重叠、边框变黑、空白页，往往不是代码逻辑问题，而是 Bootstrap 默认 print 样式没被压制。

  

  超级简历WonderCV

  一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

  下载

  关键动作：

  • 在自定义 末尾加 @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 + 覆盖来得快

  真正省时间的做法：从零搭 container + row 结构，抄一段 Grayscale 的配色变量进 ，比调模板配置更快。复杂点在于打印样式和字体 fallback 链，这两处容易被忽略，但决定最终交付质量。