Bootstrap 5 可快速搭建响应式名片页，用 container、card、text-center 等内置类避免手写 CSS；结构分头部、卡片主体、联系方式三部分，语义化组织 DOM；图标推荐 Bootstrap Icons 或规范 SVG；通过 CSS 变量统一改色改字体；需手动启用深色模式并添加打印样式。
用 Bootstrap 5 快速搭出响应式名片页，别从头写 CSS
直接上手就行，Bootstrap 5 的 container、card 和 text-center 足够撑起一个干净体面的个人名片页——不用自己调边距、不用反复测移动端断点，重点是把信息层级理清楚。
核心结构就三块：头部信息区 + 卡片主体 + 联系方式栅格
别堆组件，按语义组织 DOM。常见错误是把所有内容塞进一个 card 里导致移动端挤压变形；正确做法是用 container 包整体，row + col 控制横向分布，card 只包核心身份信息（姓名、职位、简介）。
-
h1放姓名，加display-4类放大但不破坏流式布局 - 职位用
h5+text-muted，避免和姓名视觉权重打架 - 简介段落加
lead类，行高和字号自动适配 - 联系方式用
list-unstyled去掉默认圆点，再用row分三列（邮箱/电话/地址），小屏自动堆叠
图标别硬贴 PNG，用 Bootstrap Icons 或 SVG 内联
很多人卡在图标对齐和尺寸——bootstrap-icons 的 bi bi-envelope 这类类名能直接控制大小颜色，比 img 标签省心。如果用自定义 SVG，务必加 height="1em" 和 vertical-align="middle"，否则文字基线错位。
示例联系方式行：
<div class="row mt-4">
<div class="col-12 col-md-4">
<i class="bi bi-envelope me-2"></i> <a href="mailto:me@example.com">me@example.com</a>
</div>
<div class="col-12 col-md-4">
<i class="bi bi-telephone me-2"></i> +86 138-0013-8000
</div>
<div class="col-12 col-md-4">
<i class="bi bi-geo-alt me-2"></i> Shanghai, China
</div>
</div>
字体和配色别碰默认主题，先改 :root 变量再覆盖
想换主色？别一个个改 btn-primary 或 bg-primary 的 background-color——Bootstrap 5 支持 CSS 自定义属性，直接在 <style></style> 里重设 --bs-primary 就行。字体同理，改 --bs-body-font-family 比全局搜 font-family 安全得多。
- 深色模式支持要手动加
data-bs-theme="dark"到html标签，不然text-body-secondary在暗色下会发灰 - 卡片阴影用
shadow-sm或shadow，别用shadow-lg——名片页需要轻量感，不是仪表盘 - 打印时隐藏图标和背景色：加
@media print { .bi { display: none; } .bg-light { background-color: transparent !important; } }
最易被忽略的是打印样式和深色模式适配，这两处一漏，用户转发名片或夜间查看时信息就糊了。其他都是结构和变量的事，改完就能用。
