Bootstrap5卡片组件：打造简洁美观的内容展示单元

在网页设计中，我们经常需要将信息以整齐、美观的方式呈现，比如产品列表、文章预览、用户资料等。Bootstrap5的卡片（Card）组件正是为解决这类需求而生的——它就像一个个“信息盒子”，能把零散的内容（图片、文字、按钮等）有序地组织起来，同时支持响应式布局，让页面在不同设备上都能完美展示。

一、卡片组件的基础结构¶

卡片的核心是通过 .card 类创建的容器，内部可根据需求添加标题、文本、图片、按钮等内容。基础结构如下：

<div class="card" style="width: 18rem;"> <!-- 外层卡片容器 -->
  <img src="..." 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：卡片的“外壳”，所有内容都包裹在这个类中。
.card-img-top：让图片显示在卡片顶部（也可用 .card-img-bottom 放底部，或 .card-img-overlay 叠加文字）。
.card-body：卡片的核心内容容器，用于放置标题、文本、按钮等。
.card-title：卡片标题（字体较大，加粗）。
.card-text：卡片正文（自动调整行高，避免文本拥挤）。

二、卡片的核心组件与用法¶

卡片不仅能放简单内容，还支持多种组件组合，让内容更丰富。以下是常用组件及其用法：

1. 图片与文字组合¶

图片可通过 .card-img-top 直接放在顶部，或用 .card-img-overlay 让文字叠加在图片上（需配合绝对定位）：

<!-- 图片在顶部 -->
<div class="card" style="width: 20rem;">
  <img src="product.jpg" class="card-img-top" alt="产品图">
  <div class="card-body">
    <h5 class="card-title">无线耳机</h5>
    <p class="card-text">续航10小时，防水设计，支持快充...</p>
    <span class="badge bg-success">热销</span> <!-- 标签 -->
  </div>
</div>

<!-- 文字叠加在图片上 -->
<div class="card" style="width: 20rem; height: 250px;">
  <img src="bg.jpg" class="card-img-top" alt="背景图">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title text-white">旅行相册</h5>
    <p class="card-text text-white-75">记录美好瞬间</p>
  </div>
</div>

2. 列表与分隔线¶

若需展示列表（如产品参数、文章标签），可使用 .list-group 类，并结合 .list-group-flush 去掉默认边框：

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">产品参数</h5>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">尺寸：15.6英寸</li>
      <li class="list-group-item">分辨率：4K</li>
      <li class="list-group-item">重量：1.2kg</li>
    </ul>
  </div>
</div>

3. 按钮与操作区¶

在卡片底部添加页脚（.card-footer）或直接放按钮，可用于引导用户交互：

<div class="card" style="width: 18rem;">
  <img src="avatar.jpg" class="card-img-top" alt="用户头像">
  <div class="card-body">
    <h5 class="card-title">用户信息</h5>
    <p class="card-text">姓名：张三 | 职位：前端开发</p>
  </div>
  <div class="card-footer bg-transparent">
    <a href="#" class="btn btn-outline-primary me-2">关注</a>
    <a href="#" class="btn btn-outline-secondary">私信</a>
  </div>
</div>

三、卡片的样式与布局¶

通过工具类可快速调整卡片的外观和排列方式：

1. 控制卡片大小¶

用 width 或 max-width 自定义宽度，或直接使用Bootstrap尺寸类（如 .card-sm、.card-lg，需注意：Bootstrap5中尺寸类为 .card-sm 等，但需结合自定义宽度，或通过工具类 col-* 控制）：

<div class="card col-md-4 mb-3"> <!-- 中等屏幕占4列，底部留间距 -->
  <div class="card-body text-center">
    <h5 class="card-title">小卡片</h5>
    <p class="card-text">内容简短，适合移动端展示</p>
  </div>
</div>

2. 对齐与阴影¶

阴影：通过 .shadow-sm（浅阴影）、.shadow（默认阴影）、.shadow-lg（深阴影）控制。
居中对齐：用 .text-center 让卡片内文本居中，或 .d-flex justify-content-center 让内容整体居中。

<div class="card shadow mb-4" style="max-width: 300px;">
  <div class="card-body text-center">
    <h5 class="card-title">居中卡片</h5>
    <p class="card-text">这是一段居中的文本内容...</p>
  </div>
</div>

3. 响应式排列卡片¶

使用 .row + .col-* 可实现多卡片的响应式布局（小屏幕单列，中等屏幕多列）：

<div class="row row-cols-1 row-cols-md-3 g-4"> <!-- 小屏幕1列，中等屏幕3列，间距4 -->
  <div class="col">
    <div class="card h-100"> <!-- h-100占满父容器高度 -->
      <div class="card-body">
        <h5 class="card-title">卡片1</h5>
        <p class="card-text">内容1</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">卡片2</h5>
        <p class="card-text">内容2</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">卡片3</h5>
        <p class="card-text">内容3</p>
      </div>
    </div>
  </div>
</div>

四、综合示例：打造产品展示卡片¶

以下是一个包含图片、标题、价格、参数、按钮的完整卡片示例：

<div class="card" style="max-width: 250px;">
  <img src="phone.jpg" class="card-img-top" alt="智能手机">
  <div class="card-body">
    <h5 class="card-title">XPhone 14</h5>
    <p class="card-subtitle mb-2 text-muted">2023年旗舰机型</p>
    <p class="card-text h4 text-primary fw-bold">¥4999</p> <!-- 突出价格 -->
    <p class="card-text small text-muted">6.7英寸全面屏 · 128GB存储</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">芯片：骁龙8 Gen2</li>
    <li class="list-group-item">摄像头：5000万像素</li>
    <li class="list-group-item">电池：4500mAh</li>
  </ul>
  <div class="card-footer bg-transparent">
    <a href="#" class="btn btn-primary w-100">立即购买</a>
  </div>
</div>

五、注意事项¶

图片处理：所有图片需添加 alt 属性（描述性文字），提升可访问性；图片用 img-fluid 类可自适应卡片宽度。
避免冲突：不要重复设置与Bootstrap工具类冲突的样式（如不要给 .card 额外设置 border-radius，除非必须）。
布局嵌套：卡片内可嵌套列表、按钮组等，但需合理使用间距工具类（如 .mb-2、.mt-3）避免拥挤。

通过以上内容，你已掌握了Bootstrap5卡片组件的基础用法。卡片的灵活性使其能适应各种场景，从简单的信息展示到复杂的内容组合。接下来可尝试自定义样式，或结合JavaScript实现卡片的动态交互（如点击展开详情），进一步提升页面体验。