4. 常用组件

这是什么：组件 = Bootstrap 预先做好的「成品界面件」——导航栏、按钮、卡片、表格、警告框，每个都是一组固定类名的组合，照着拼就能用。

为什么用：栅格解决「放哪」，组件解决「放什么」。这一章覆盖了做页面 80% 的需求，而且每个组件的 HTML 结构都有固定套路——记住骨架，细节查文档。

如何用：本章示例均可运行，重点是认结构：哪个 div 装什么、类加在哪一层。

4.1 按钮：五变体三尺寸

<button class="btn btn-primary">主要</button>
<button class="btn btn-outline-success">绿色描边</button>
<button class="btn btn-danger btn-sm">小号危险</button>
<button class="btn btn-secondary" disabled>禁用</button>
<a href="#" class="btn btn-link">链接也能像按钮</a>

• 基础五套语义色：btn-primary（蓝）、btn-success（绿）、btn-danger（红）、btn-warning（黄）、btn-secondary（灰），外加 btn-info（青）、btn-dark / btn-light
• outline- 前缀 = 描边版；btn-sm / btn-lg = 尺寸
• 悬停、按压、禁用的颜色变化全内置，不用写 :hover

4.2 卡片：最常用的「内容盒」

卡片就是 CSS 教程里你手写过的「白底圆角阴影块」，Bootstrap 一个类搞定：

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">青蛙的个人主页</h5>
    <h6 class="card-subtitle mb-2 text-muted">前端学习中</h6>
    <p class="card-text">喜欢把学到的东西写成教程，每一步都能动手跑。</p>
    <a href="#" class="card-link">看博客</a>
    <a href="#" class="card-link">联系我</a>
  </div>
</div>

卡片骨架四件套：card（外壳）→ card-img-top（顶部图）→ card-body（内边距由它管）→ card-footer（底栏）。卡片放进栅格就是卡片墙：

<div class="row g-4">
  <div class="col-md-4"><div class="card h-100">…</div></div>
  <div class="col-md-4"><div class="card h-100">…</div></div>
  <div class="col-md-4"><div class="card h-100">…</div></div>
</div>

h-100 让三张卡等高——Flex 默认拉伸，但卡片内部背景只画到自己的高度，不加 h-100 会看出高低差。

4.3 导航栏：会自己变汉堡包

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">🐸 青蛙网</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
        <li class="nav-item"><a class="nav-link" href="#">教程</a></li>
        <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="搜索">
        <button class="btn btn-outline-success" type="submit">搜</button>
      </form>
    </div>
  </div>
</nav>

结构记忆：navbar 定外壳 → navbar-expand-lg 定「多宽以下收起来」→ navbar-toggler 是那个汉堡按钮 → collapse 包住要收起的菜单。窄屏时菜单自动变成汉堡点开合——这是第 7 章 JS 组件「Collapse」的 data 属性用法，这里先照抄骨架。

• me-auto 把右侧内容推到最边（margin-end auto）
• data-bs-* 前缀：v5 所有 JS 行为标记都用它，避免和 v4 的 data-* 冲突

4.4 表格：三行就有模样

<table class="table table-striped table-hover align-middle">
  <thead class="table-dark">
    <tr><th>技术栈</th><th>难度</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>⭐</td></tr>
    <tr><td>CSS</td><td>⭐⭐</td></tr>
    <tr><td>JavaScript</td><td>⭐⭐⭐</td></tr>
  </tbody>
</table>

table 是必需底座，其余随意叠加：table-striped 斑马纹、table-hover 悬停高亮、table-sm 紧凑、align-middle 垂直居中。窄屏表格放不下？外层套 .table-responsive，自动出横向滚动条。

4.5 小配件：徽章、警告框、进度条

<span class="badge text-bg-success">9 章全部上线</span>
<span class="badge rounded-pill text-bg-danger">3 条新消息</span>

<div class="alert alert-info mt-3" role="alert">
  提示：这些组件都只要加类名，不用写样式。
</div>

<div class="progress mt-3" role="progressbar" aria-label="学习进度">
  <div class="progress-bar w-75">75%</div>
</div>

4.6 小结

下一章专门讲表单——输入框怎么变漂亮、怎么让浏览器帮你校验。