Bootstrap仅提供基础样式与响应式能力，主页美观取决于组件组合、间距控制、配色取舍及内容节奏；官方示例因过时设计语言与统一间距易显廉价。
Bootstrap 本身不负责“美观”，它只提供基础样式和响应式能力；真正决定主页是否好看的是你对组件的组合、间距控制、配色取舍和内容节奏的把握。
为什么直接套用 Bootstrap 官方示例会显得廉价
官方文档里的 jumbotron、card、navbar 默认样式有明显设计年代感（比如过宽的阴影、生硬的圆角、饱和度过高的主题色），且所有项目用同一套默认间距（mb-4、pt-5）会让页面失去呼吸感。
- 别无脑堆砌
container-fluid+row+col，先想清楚每块内容的视觉权重：简介区要比技能列表大，项目卡片之间留白要比文字段落之间多 - 禁用默认主题色——把
$primary改成带灰度的蓝（如#4a6fa5），$body-color调成#333而非默认的#212529，文字立刻更耐看 - 删掉所有
text-center，居中仅用于标题或 CTA 按钮；正文一律左对齐，符合阅读习惯
如何让导航栏（navbar）不显臃肿
默认 navbar-expand-lg 在桌面端展开后占据太多垂直空间，移动端汉堡菜单又常被点开后遮住关键信息。
- 加
navbar-dark bg-dark后，必须手动设navbar-brand的color，否则在深色背景上文字不可见 - 把
nav-link的padding-top/padding-bottom从默认的0.5rem改成0.25rem，紧凑感立现 - 移动端收起时，用
navbar-toggler-icon配合自定义 SVG（而非默认三横线），能避免图标糊成一团 - 别在导航里塞邮箱或电话——放页脚，导航只留「首页」「关于」「项目」「联系」四类语义明确项
card 和 list-group 怎么搭配才不呆板
个人主页常见「技能标签墙」或「项目列表」，但直接用 card-deck 或一堆 list-group-item 会形成机械网格，缺乏主次。
- 技能展示改用
badge bg-light text-dark+ 手动空格分隔，比card更轻量；若需分组（如前端/工具），用h5小标题 +border-bottom划分，别套card-header - 项目列表放弃
list-group，改用card但只保留card-body，删掉card-header和边框；每个card内部用h5做标题，small.text-muted做时间/技术栈，末尾跟一个btn btn-sm btn-outline-primary - 所有
card加mb-4，但最后一张去掉，避免页脚前多余空白
响应式断点怎么调才真有用
Bootstrap 的 sm/md/lg 是通用阈值，但你的头像宽度可能在 768px 时就被挤变形，而项目描述文字在 992px 下才开始换行难读。
- 别迷信
col-md-6，用浏览器调试器测出实际内容撑开宽度——头像区域在 620px 屏幕下就该从col-12切到col-6，而不是等md - 用
@media (max-width: 619px)写少量覆盖样式，比如把.hero-text的font-size从1.8rem降到1.4rem，比依赖fs-sm-*类更可控 - 图片一律设
max-width: 100%和height: auto，但禁止用img-fluid——它会给所有图加display: block，导致内联图（如 GitHub 小图标）掉行
最易被忽略的其实是字体加载时机：本地引入 bootstrap.min.css 后，若没同步加载 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" 对应的系统字体，Windows 用户看到的会是发虚的 Helvetica，整个页面质感直接降级。这个细节没法靠 Bootstrap 自动解决。
