Bootstrap 5学习教程，从入门到精通， Bootstrap 5 卡片组件语法知识点及案例（15）

Bootstrap 5 卡片组件语法知识点及案例

卡片组件概述

Bootstrap 5 的卡片(card)是一个灵活且可扩展的内容容器，包含多种选项来展示内容、标题、文本、图像、列表组、按钮等。卡片不需要特定的标记就能使用，但需要一些特定的类和结构才能获得最佳效果。

基本卡片结构

基本语法知识点

.card - 卡片容器的主类
.card-body - 卡片内容区域
.card-title - 卡片标题（通常使用 <h*> 标签）
.card-text - 卡片文本内容
.card-img-top/.card-img-bottom - 卡片顶部/底部图片

基础卡片示例代码

<!-- 基础卡片结构 -->
<div class="card" style="width: 18rem;"><!-- 卡片顶部图片 --><img src="https://via.placeholder.com/286x180" 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">这是一些示例文本，用于构建卡片的内容并占位。卡片内容可以包含任何HTML元素。</p><!-- 卡片链接 --><a href="#" class="card-link">卡片链接</a><a href="#" class="card-link">另一个链接</a></div>
</div>

卡片内容类型

1. 卡片标题、文本和链接

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">特殊标题处理</h5><p class="card-text">支持在卡片内使用标准的HTML元素。.card-title、.card-subtitle 和 .card-link 类有特殊处理。</p><a href="#" class="btn btn-primary">按钮样式链接</a></div>
</div>

2. 卡片图片

<div class="card" style="width: 18rem;"><!-- 顶部图片 --><img src="https://via.placeholder.com/286x180" class="card-img-top" alt="..."><div class="card-body"><p class="card-text">图片在卡片顶部</p></div>
</div><div class="card" style="width: 18rem;"><div class="card-body"><p class="card-text">图片在卡片底部</p></div><!-- 底部图片 --><img src="https://via.placeholder.com/286x180" class="card-img-bottom" alt="...">
</div>

3. 列表组卡片

<div class="card" style="width: 18rem;"><!-- 卡片头部 --><div class="card-header">功能列表</div><!-- 列表组 --><ul class="list-group list-group-flush"><li class="list-group-item">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li></ul><!-- 卡片底部 --><div class="card-footer">列表底部</div>
</div>

卡片布局选项

1. 卡片组 (Card Groups)

<!-- 卡片组会使所有卡片等高并排显示 -->
<div class="card-group"><div class="card"><img src="https://via.placeholder.com/286x180" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">卡片组 1</h5><p class="card-text">这是卡片组中的第一个卡片。</p></div><div class="card-footer"><small class="text-muted">最后更新 3 分钟前</small></div></div><div class="card"><img src="https://via.placeholder.com/286x180" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">卡片组 2</h5><p class="card-text">这是卡片组中的第二个卡片。</p></div><div class="card-footer"><small class="text-muted">最后更新 10 分钟前</small></div></div><div class="card"><img src="https://via.placeholder.com/286x180" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">卡片组 3</h5><p class="card-text">这是卡片组中的第三个卡片。</p></div><div class="card-footer"><small class="text-muted">最后更新 1 小时前</small></div></div>
</div>

2. 卡片网格 (Grid Cards)

<!-- 使用网格系统创建响应式卡片布局 -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"><div class="col"><div class="card h-100"><img src="https://via.placeholder.com/286x180" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">网格卡片 1</h5><p class="card-text">响应式网格布局中的卡片。</p></div></div></div><div class="col"><div class="card h-100"><img src="https://via.placeholder.com/286x180" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">网格卡片 2</h5><p class="card-text">响应式网格布局中的卡片。</p></div></div></div><div class="col"><div class="card h-100"><img src="https://via.placeholder.com/286x180" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">网格卡片 3</h5><p class="card-text">响应式网格布局中的卡片。</p></div></div></div>
</div>

卡片样式选项

1. 卡片背景和边框

<!-- 背景颜色类 -->
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Primary 卡片</h5><p class="card-text">使用背景颜色类设置卡片背景。</p></div>
</div><div class="card text-white bg-success mb-3" style="max-width: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Success 卡片</h5><p class="card-text">使用背景颜色类设置卡片背景。</p></div>
</div><!-- 边框颜色类 -->
<div class="card border-primary mb-3" style="max-width: 18rem;"><div class="card-header">Header</div><div class="card-body text-primary"><h5 class="card-title">Primary 边框卡片</h5><p class="card-text">使用边框颜色类设置卡片边框。</p></div>
</div>

2. 卡片阴影

<!-- 无阴影（默认） -->
<div class="card shadow-none mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">无阴影卡片</h5></div>
</div><!-- 小阴影 -->
<div class="card shadow-sm mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">小阴影卡片</h5></div>
</div><!-- 常规阴影 -->
<div class="card shadow mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">常规阴影卡片</h5></div>
</div><!-- 大阴影 -->
<div class="card shadow-lg mb-3" style="width: 18rem;"><div class="card-body"><h5 class="card-title">大阴影卡片</h5></div>
</div>

卡片导航

<!-- 卡片导航 -->
<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="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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">Go somewhere</a></div>
</div>

卡片图像覆盖

<!-- 图像覆盖卡片 -->
<div class="card bg-dark text-white"><img src="https://via.placeholder.com/600x400" class="card-img" alt="..."><div class="card-img-overlay"><h5 class="card-title">图像覆盖卡片</h5><p class="card-text">这是图像上的文字覆盖。</p><p class="card-text">最后更新 3 分钟前</p></div>
</div>

水平卡片

<!-- 水平卡片 -->
<div class="card mb-3" style="max-width: 540px;"><div class="row g-0"><div class="col-md-4"><img src="https://via.placeholder.com/180x250" 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>

实用卡片示例

产品卡片

<div class="card"><!-- 产品徽章 --><div class="badge bg-danger text-white position-absolute" style="top: 0.5rem; right: 0.5rem">促销</div><!-- 产品图片 --><img src="https://via.placeholder.com/300x200" class="card-img-top" alt="产品图片"><div class="card-body"><!-- 产品类别 --><div class="text-muted text-uppercase small mb-2">电子产品</div><!-- 产品名称 --><h5 class="card-title">高端智能手机</h5><!-- 产品价格 --><div class="mb-2"><span class="h5">$599.99</span><span class="text-muted"><del>$699.99</del></span></div><!-- 产品评分 --><div class="mb-3"><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="fas fa-star text-warning"></i><i class="far fa-star text-warning"></i><span class="text-muted small">(45 评价)</span></div><!-- 加入购物车按钮 --><button class="btn btn-primary w-100"><i class="fas fa-cart-plus me-2"></i>加入购物车</button></div>
</div>

用户资料卡片

<div class="card text-center"><!-- 用户头像 --><div class="card-header"><img src="https://via.placeholder.com/150" class="rounded-circle border border-3 border-white shadow-sm" width="100" alt="用户头像"></div><div class="card-body"><!-- 用户名 --><h5 class="card-title">张三</h5><!-- 用户职位 --><p class="text-muted mb-3">前端开发工程师</p><!-- 用户简介 --><p class="card-text">专注于Web开发，热爱Bootstrap框架，喜欢分享技术经验。</p><!-- 社交链接 --><div class="d-flex justify-content-center gap-3"><a href="#" class="text-primary"><i class="fab fa-twitter fa-lg"></i></a><a href="#" class="text-danger"><i class="fab fa-instagram fa-lg"></i></a><a href="#" class="text-primary"><i class="fab fa-linkedin fa-lg"></i></a><a href="#" class="text-dark"><i class="fab fa-github fa-lg"></i></a></div></div><!-- 卡片底部 --><div class="card-footer text-muted">最后活跃: 2小时前</div>
</div>