8. 综合练习：Bootstrap 版个人主页

这是什么：综合实战 = 把栅格、组件、工具类、JS 交互四章内容合到一页，把 CSS 教程第 8 章 手写美化的个人主页用 Bootstrap 重做一遍——自定义 CSS 一行不写。

为什么用：同一份需求，两种做法放在一起才看得出差距：CSS 版写了近百行样式；Bootstrap 版全部是类名拼装，还白送了响应式汉堡导航、等高卡片和深色模式。最后一章也是「验收」：哪块结构眼熟但想不起来，倒回对应章节。

如何用：先通读目标效果清单，再运行完整示例、对照「技术点对照表」逐个回看；最后做拓展练习——加弹窗、切深色，全是学过的。

8.1 目标效果

和 CSS 版主页功能一致，但实现方式全换：

1. 导航栏：宽屏横排，窄屏自动收成汉堡菜单（navbar + Collapse，学自第 4、7 章）
2. 「关于我」「技能」「联系我」三块卡片，圆角阴影间距统一（card + 工具类）
3. 技能六项做成响应式网格：手机 2 列、平板 3 列、桌面 6 列（col-* 断点叠加）
4. 页脚放一个「切换深色」按钮（第 6 章 data-bs-theme）

8.2 完整示例（整段可跑）

贴进「🧪 在线运行场」，拖动窗口宽度看导航栏和网格的断点变化：

<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的个人主页（Bootstrap 版）</title>
  <link href="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
    <div class="container">
      <a class="navbar-brand" href="#">🐸 青蛙的个人主页</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
              data-bs-target="#navMenu" aria-label="展开菜单">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#about">关于我</a></li>
          <li class="nav-item"><a class="nav-link" href="#skills">技能</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">联系我</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <main class="container py-4">
    <div class="row g-4">
      <section id="about" class="col-12">
        <div class="card p-2">
          <div class="card-body">
            <h1 class="card-title text-primary">你好，我是青蛙</h1>
            <p class="card-text">一个正在学前端的小白，喜欢把学到的东西写成教程。</p>
            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
                    data-bs-target="#hiModal">打个招呼 👋</button>
          </div>
        </div>
      </section>

      <section id="skills" class="col-12">
        <div class="card p-2">
          <div class="card-body">
            <h2 class="h5 card-title">我的技能</h2>
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3 mt-1">
              <div class="col"><div class="p-3 text-center bg-primary-subtle border border-primary-subtle rounded">HTML</div></div>
              <div class="col"><div class="p-3 text-center bg-success-subtle border border-success-subtle rounded">CSS</div></div>
              <div class="col"><div class="p-3 text-center bg-info-subtle border border-info-subtle rounded">JavaScript</div></div>
              <div class="col"><div class="p-3 text-center bg-warning-subtle border border-warning-subtle rounded">Python</div></div>
              <div class="col"><div class="p-3 text-center bg-light border rounded">Git</div></div>
              <div class="col"><div class="p-3 text-center bg-light border rounded">写作</div></div>
            </div>
          </div>
        </div>
      </section>

      <section id="contact" class="col-12">
        <div class="card p-2">
          <div class="card-body">
            <h2 class="h5 card-title">联系我</h2>
            <p class="card-text mb-1">邮箱：frog@example.com</p>
            <p class="text-secondary small">欢迎交流学习！</p>
          </div>
        </div>
      </section>
    </div>
  </main>

  <footer class="border-top py-4 mt-4 bg-body-tertiary">
    <div class="container d-flex justify-content-between align-items-center">
      <span class="text-secondary small">© 2026 青蛙 · Bootstrap 5 重制版</span>
      <button class="btn btn-sm btn-outline-secondary" onclick="
        document.documentElement.dataset.bsTheme =
        document.documentElement.dataset.bsTheme === 'dark' ? 'light' : 'dark'">
        切换深色
      </button>
    </div>
  </footer>

  <div class="modal fade" id="hiModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">你好！</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          <p>这个弹窗没有写一行 JavaScript——纯 <code>data-bs-*</code> 属性驱动。</p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

8.3 技术点对照表

整页没有一行自定义 CSS 规则——<style> 标签都不存在。

8.4 拓展练习（选做）

1. 轮播头图：把「关于我」卡片上方加一个第 7 章的 Carousel，放三张占位图
2. 联系表单：用第 5 章骨架在页面底部加「姓名 + 邮箱 + 留言」表单，邮箱 required 交给浏览器校验
3. 等高双栏：把「技能」和「联系」放进同一个 row，各 col-md-8 / col-md-4，加 h-100 让两卡等高
4. 对照读数：把 CSS 版和 Bootstrap 版并排打开，拖窗口对比两边的断点行为差异

8.5 小结

Bootstrap 教程到此全部完成。你现在会的是：

• 三件套：container → row → col-*，6 个断点口算布局
• 组件库：导航、卡片、按钮、表格、表单，加类名即用
• 工具类：间距、文字、显隐，页面打磨不求人
• 零 JS 交互：data-bs-* 接线弹窗、轮播、折叠，深色模式一个属性

它和 CSS 教程不是「二选一」：懂底层的人用 Bootstrap 才知道每个类在干什么。接下来想继续深入：工程化（npm 安装 + 按需打包）看官方文档的 Tools 一节；想在框架里用组件库，可以带着 Bootstrap 的组件思维去 Vue 或 React 教程，那边有专门为框架生态准备的组件库（Element Plus、Ant Design），思路是相通的 🐸