Bootstrap 5 组件篇：按钮、卡片、轮播，复制粘贴就能毕业？

系列 ③ | 目标：官方 200+ 组件别全背，先掌握这 10 个“复制粘贴”神器，下班比打卡机还准时。

1. 开场白：组件 = 官方给你写好的 UI 乐高

还在自己吭哧吭哧画按钮圆角？
——设计师一句“再大一点再蓝一点”，你就从 #007bff 调到 #0066cc 再调回 #007bff。
Bootstrap 5 直接把按钮、卡片、轮播、模态框做成现成乐高，一行 class 拼上去，颜色、大小、动效、无障碍全部自带。
记住口诀：能拼就不写，能改就不造。

2. 按钮：三种尺寸 + 七种颜色，一秒变专业

<!-- 基础七种色 -->
<button class="btn btn-primary">主要</button>
<button class="btn btn-outline-danger">危险描边</button>

<!-- 大小 -->
<button class="btn btn-success btn-lg">大块绿色</button>
<button class="btn btn-sm btn-warning">小黄提醒</button>

<!-- 状态 -->
<button class="btn btn-primary" disabled>已禁用</button>

技巧：同一页面主色只用一种，用户秒懂“点这里”。

3. 卡片（Card）：图文视频全能框，搞定 80% 版面

<div class="card" style="width: 18rem;">
  <img src="thumb.jpg" class="card-img-top" alt="">
  <div class="card-body">
    <h5 class="card-title">速成标题</h5>
    <p class="card-text">一段废话，让读者以为很长。</p>
    <a href="#" class="btn btn-primary">去看看</a>
  </div>
</div>

一行 card 解决：

• 圆角 + 阴影 + 悬停动效
• 自带 padding，不会贴边窒息
• 可嵌套 list-group、footer，自由拼装

响应式组合：

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">【上面 card 代码】</div>
  <!-- 重复 N 个 -->
</div>

手机 1 列，平板 3 列，零媒体查询。

4. 轮播（Carousel）：Banner 自动播放，一行不用 JS

<div id="banner" class="carousel slide" data-bs-ride="carousel">
  <!-- 指示点 -->
  <div class="carousel-indicators">
    <button data-bs-target="#banner" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#banner" data-bs-slide-to="1"></button>
  </div>
  <!-- 图片区 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="1.jpg" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="2.jpg" class="d-block w-100" alt="">
    </div>
  </div>
  <!-- 左右箭头 -->
  <button class="carousel-control-prev" data-bs-target="#banner" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
</div>

新增彩蛋：
加上 data-bs-interval="3000" 可改自动播放速度；
carousel-fade 替换滑动为淡入淡出，高逼格秒上线。

5. 导航栏（Navbar）：响应式折叠，手机不再挤爆

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" 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>
    </div>
  </div>
</nav>

要点：

• navbar-expand-lg → 大屏水平，小屏折叠
• ms-auto → 菜单靠右（margin-start: auto）
• 深色模式：换 navbar-dark bg-dark，一秒变黑

6. 徽章 & 警告框：小元素也有大用途

徽章（挂数字、标签）：

<span class="badge bg-danger">Hot</span>
<button class="btn btn-primary">
  消息 <span class="badge bg-light text-dark">4</span>
</button>

警告框（临时提示）：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  强提示：别再熬夜写 CSS 了！
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

7. 组件组合实战：5 分钟拼一个“能看”的产品页

结构速记（复制即可）：

navbar → carousel → container (row>col-md-4 卡片*3) → footer

效果：

• 大屏：顶部导航 + 全宽 Banner + 三卡片并排
• 手机：折叠导航 + 图片轮播 + 卡片单列

你只需改文字、换图、调颜色，页面立刻像请了设计师。

8. 避坑速记

1. 组件样式被覆盖？
   引入顺序：Bootstrap CDN 先，自定义 CSS 后，不然权重被秒。
2. 轮播图片变形？
   给图片加 object-fit: cover; 固定比例，或统一切图尺寸。
3. navbar 折叠按钮点了没反应？
   忘记引 bootstrap.bundle.min.js → 自动、手动都白搭。

今日作业：用卡片 + 按钮拼一个“ pricing 套餐”区块

需求：

• 三列定价卡片，中间高亮阴影
• 提供“初级/专业/企业”三档
• 大屏横排，手机自动堆叠

参考答案（仅核心）：

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body text-center">
        <h5 class="card-title">初级</h5>
        <h2 class="text-primary">¥0</h2>
        <p class="card-text">永远免费，良心。</p>
        <button class="btn btn-outline-primary w-100">立即开始</button>
      </div>
    </div>
  </div>
  <!-- 重复 3 次，中间加 shadow 或 border-primary 高亮 -->
</div>

做完截图发群，让 PM 怀疑你开了“付费模板”外挂。

下集预告