Bootstrap 卡片组件 #

卡片是一个灵活的容器组件，可以包含图片、标题、正文、按钮等多种内容。Bootstrap 的卡片组件提供了丰富的样式选项和布局方式。

基础卡片 #

基本结构 #

html

<div class="card">
  <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-body`	内容区域
卡片标题	`.card-title`	标题
卡片副标题	`.card-subtitle`	副标题
卡片文本	`.card-text`	正文文本
卡片链接	`.card-link`	链接
卡片头部	`.card-header`	头部区域
卡片底部	`.card-footer`	底部区域
卡片图片	`.card-img-top`	顶部图片
卡片图片	`.card-img-bottom`	底部图片

卡片内容 #

完整卡片 #

html

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <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>

仅图片 #

html

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
</div>

图片覆盖 #

html

<div class="card bg-dark text-white">
  <img src="image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">图片上的文本内容。</p>
  </div>
</div>

头部和底部 #

html

<div class="card">
  <div class="card-header">
    卡片头部
  </div>
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文内容。</p>
  </div>
  <div class="card-footer">
    卡片底部
  </div>
</div>

引用卡片 #

html

<div class="card">
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>这是一段引用文本。</p>
      <footer class="blockquote-footer">引用来源 <cite title="来源">作者</cite></footer>
    </blockquote>
  </div>
</div>

卡片尺寸 #

卡片默认宽度为 100%，可以使用栅格系统或设置固定宽度：

html

<!-- 使用栅格系统 -->
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">卡片内容</div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">卡片内容</div>
    </div>
  </div>
</div>

<!-- 固定宽度 -->
<div class="card" style="width: 18rem;">
  <div class="card-body">卡片内容</div>
</div>

卡片样式 #

文本对齐 #

html

<div class="card text-center">
  <div class="card-body">
    <h5 class="card-title">居中对齐</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

<div class="card text-end">
  <div class="card-body">
    <h5 class="card-title">右对齐</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

导航卡片 #

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <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 disabled">禁用</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

胶囊导航 #

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <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 disabled">禁用</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

卡片颜色 #

背景色 #

html

<div class="card text-white bg-primary mb-3">
  <div class="card-header">头部</div>
  <div class="card-body">
    <h5 class="card-title">主要卡片</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

<div class="card text-white bg-secondary mb-3">
  <div class="card-body">次要卡片</div>
</div>

<div class="card text-white bg-success mb-3">
  <div class="card-body">成功卡片</div>
</div>

<div class="card text-white bg-danger mb-3">
  <div class="card-body">危险卡片</div>
</div>

<div class="card text-dark bg-warning mb-3">
  <div class="card-body">警告卡片</div>
</div>

<div class="card text-dark bg-info mb-3">
  <div class="card-body">信息卡片</div>
</div>

<div class="card text-dark bg-light mb-3">
  <div class="card-body">浅色卡片</div>
</div>

<div class="card text-white bg-dark mb-3">
  <div class="card-body">深色卡片</div>
</div>

边框色 #

html

<div class="card border-primary mb-3">
  <div class="card-header">头部</div>
  <div class="card-body text-primary">
    <h5 class="card-title">主要边框卡片</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

<div class="card border-secondary mb-3">
  <div class="card-body">次要边框卡片</div>
</div>

<div class="card border-success mb-3">
  <div class="card-body">成功边框卡片</div>
</div>

混合样式 #

html

<div class="card border-success mb-3">
  <div class="card-header bg-transparent border-success">头部</div>
  <div class="card-body text-success">
    <h5 class="card-title">混合样式卡片</h5>
    <p class="card-text">卡片内容</p>
  </div>
  <div class="card-footer bg-transparent border-success">底部</div>
</div>

卡片组 #

基础卡片组 #

html

<div class="card-group">
  <div class="card">
    <img src="image1.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">
      <small class="text-muted">底部信息</small>
    </div>
  </div>
  <div class="card">
    <img src="image2.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">
      <small class="text-muted">底部信息</small>
    </div>
  </div>
  <div class="card">
    <img src="image3.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">
      <small class="text-muted">底部信息</small>
    </div>
  </div>
</div>

卡片网格 #

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
      </div>
    </div>
  </div>
</div>

三列卡片网格 #

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
      </div>
    </div>
  </div>
</div>

卡片布局 #

水平卡片 #

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="image.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">这是水平布局的卡片，图片在左侧，内容在右侧。</p>
        <p class="card-text"><small class="text-muted">最后更新于 3 分钟前</small></p>
      </div>
    </div>
  </div>
</div>

等高卡片 #

使用 .h-100 类使卡片等高：

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">较短的内容。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">这是较长的内容，用于展示等高效果。卡片会自动扩展到相同高度。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">中等长度的内容。</p>
      </div>
    </div>
  </div>
</div>

实战案例 #

产品卡片 #

html

<div class="card h-100">
  <img src="product.jpg" class="card-img-top" alt="产品图片">
  <div class="card-body">
    <h5 class="card-title">产品名称</h5>
    <p class="card-text text-danger fw-bold">¥99.00</p>
    <p class="card-text text-muted text-decoration-line-through">¥199.00</p>
    <p class="card-text">产品描述信息，介绍产品的特点和优势。</p>
  </div>
  <div class="card-footer bg-white border-top-0">
    <div class="d-grid">
      <button class="btn btn-primary">加入购物车</button>
    </div>
  </div>
</div>

用户卡片 #

html

<div class="card text-center">
  <div class="card-body">
    <img src="avatar.jpg" class="rounded-circle mb-3" width="80" height="80" alt="头像">
    <h5 class="card-title">用户名称</h5>
    <p class="card-text text-muted">前端开发工程师</p>
    <p class="card-text">用户简介，介绍用户的背景和专长。</p>
    <div class="d-flex justify-content-center gap-2">
      <a href="#" class="btn btn-primary btn-sm">关注</a>
      <a href="#" class="btn btn-outline-secondary btn-sm">私信</a>
    </div>
  </div>
  <div class="card-footer bg-white">
    <div class="row">
      <div class="col">
        <strong>128</strong>
        <small class="d-block text-muted">文章</small>
      </div>
      <div class="col">
        <strong>1.2K</strong>
        <small class="d-block text-muted">粉丝</small>
      </div>
      <div class="col">
        <strong>256</strong>
        <small class="d-block text-muted">关注</small>
      </div>
    </div>
  </div>
</div>

文章卡片 #

html

<div class="card">
  <img src="article.jpg" class="card-img-top" alt="文章封面">
  <div class="card-body">
    <div class="mb-2">
      <span class="badge bg-primary">技术</span>
      <span class="badge bg-secondary">前端</span>
    </div>
    <h5 class="card-title">文章标题</h5>
    <p class="card-text">文章摘要，简要介绍文章的主要内容和观点...</p>
    <div class="d-flex justify-content-between align-items-center">
      <div class="text-muted small">
        <span>作者名</span> · <span>2024-01-15</span>
      </div>
      <div class="text-muted small">
        <span>阅读 1234</span> · <span>评论 56</span>
      </div>
    </div>
  </div>
</div>

统计卡片 #

html

<div class="card bg-primary text-white">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h6 class="card-subtitle mb-2">总用户数</h6>
        <h2 class="card-title mb-0">12,345</h2>
      </div>
      <div>
        <svg width="48" height="48" fill="currentColor" opacity="0.5">
          <use xlink:href="#people-icon"></use>
        </svg>
      </div>
    </div>
    <small class="text-white-50">较上月增长 12%</small>
  </div>
</div>

价格卡片 #

html

<div class="card text-center border-primary">
  <div class="card-header bg-primary text-white">
    <h4 class="my-0">专业版</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title">¥99<small class="text-muted fw-light">/月</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>10 个用户</li>
      <li>10 GB 存储</li>
      <li>优先支持</li>
      <li>高级功能</li>
    </ul>
    <button class="btn btn-lg btn-primary w-100">立即订阅</button>
  </div>
</div>

登录卡片 #

html

<div class="card shadow" style="max-width: 400px;">
  <div class="card-body p-4">
    <h4 class="card-title text-center mb-4">登录</h4>
    <form>
      <div class="mb-3">
        <label class="form-label">邮箱</label>
        <input type="email" class="form-control" placeholder="请输入邮箱">
      </div>
      <div class="mb-3">
        <label class="form-label">密码</label>
        <input type="password" class="form-control" placeholder="请输入密码">
      </div>
      <div class="d-flex justify-content-between mb-3">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="remember">
          <label class="form-check-label" for="remember">记住我</label>
        </div>
        <a href="#" class="text-decoration-none">忘记密码？</a>
      </div>
      <div class="d-grid">
        <button class="btn btn-primary" type="submit">登录</button>
      </div>
    </form>
    <hr>
    <p class="text-center text-muted mb-0">
      还没有账号？<a href="#">立即注册</a>
    </p>
  </div>
</div>

最佳实践 #

1. 使用语义化标签 #

html

<!-- 推荐 -->
<article class="card">
  <header class="card-header">...</header>
  <div class="card-body">...</div>
</article>

<!-- 也可以 -->
<section class="card">...</section>

2. 等高卡片 #

html

<!-- 使用 h-100 确保等高 -->
<div class="card h-100">...</div>

3. 响应式布局 #

html

<!-- 使用栅格系统 -->
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">...</div>
  </div>
</div>

4. 图片比例 #

html

<!-- 使用 object-fit 保持图片比例 -->
<img src="image.jpg" class="card-img-top" style="height: 200px; object-fit: cover;">

下一步 #

现在你已经掌握了卡片组件，接下来学习模态框组件，了解如何创建弹出对话框！