用Bootstrap 5写简历页应仅引入官方CDN的CSS链接，禁用JS和响应式干扰项，采用container+row+col布局，用badge展示技能，避免打印样式崩溃和字体降级问题。
用 Bootstrap 5 写简历页，别碰 bootstrap.min.css 就直接 CDN 引入
Bootstrap 官方 CDN 是最稳的起点，本地下载或 npm 安装反而容易卡在版本和构建流程里。简历页不需要响应式断点全开、也不需要 JS 组件（折叠菜单、轮播图），所以只引 CSS 就够了。
常见错误是复制了旧版 Bootstrap 4 的 CDN 链接，或者把 bootstrap.bundle.min.js 也加进来——简历页根本用不到 Popper 或 modal 动效，JS 反而可能干扰表单焦点或打印样式。
- 用这个链接：
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css - 别加
integrity和crossorigin属性——本地开发时偶尔会因 CSP 报错，先跑通再加固 - 字体、颜色、间距这些定制，直接写
<style>块覆盖，别动_variables.scss——你没在搭设计系统
简历结构用 container + row + col 就够，别套 card 或 accordion
card 看着整齐，但边框、阴影、内边距会吃掉垂直空间，打印 PDF 时经常切段落；accordion 更是纯干扰项——没人点开「工作经历」再展开看公司名。
真实使用场景就两个：屏幕浏览（需清晰分块）、打印 PDF（需线性流式布局）。Bootstrap 的栅格系统天然适配这两者。
- 顶部放
<header class="text-center py-4">，不用jumbotron（已废弃） - 核心内容区用
<div class="container"><div class="row">，左侧 3 列放联系信息 / 技能标签，右侧 9 列放经历 / 项目 - 技能用
<span class="badge bg-primary me-1">，别用progress——进度条暗示量化，而「熟悉 React」不是 70% 完成度
打印 PDF 时样式崩了？关掉 @media print 里的 display: none
Bootstrap 默认在打印媒体查询里隐藏了 .d-none、.d-md-none 这类工具类，但很多人会误用它们来“隐藏手机端不重要的模块”，结果导出 PDF 时整块内容消失。
更隐蔽的问题是 position: sticky（比如固定侧边栏），它在多数浏览器打印预览中完全失效，还会导致后续内容错位。
- 打印前删掉所有
d-*类，用语义化结构替代隐藏逻辑 - 避免
position: sticky、transform、flex-wrap: wrap-reverse——这些在 Chrome / Edge 的「另存为 PDF」里支持极差 - 加一行
@media print { body { font-size: 12pt; line-height: 1.4; } }，比依赖 Bootstrap 的 print 样式更可控
部署到 GitHub Pages 后字体变丑，检查 font-family 是否写了 "-apple-system"
Bootstrap 5 默认字体栈包含 -apple-system，这在 macOS / iOS 上显示锐利，但在 Windows 或 Linux 访问 GitHub Pages 时，如果没 fallback 到 Segoe UI 或 Ubuntu，就会降级成 Times New Roman。
这不是 Bug，是字体链断裂。GitHub Pages 静态托管不代理字体文件，所以别指望 @import Google Fonts 能稳定加载——尤其当用户开了广告屏蔽插件时。
- 直接在
<style>里重写body字体：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - 别用
font-display: swap——简历页文字少，等一帧闪一下不如直出 - 图标用 SVG 内联，别引
bootstrap-icons的 CSS——多一个 HTTP 请求，就多一分加载失败风险
