Bootstrap 5 卡片知识点详解
编程小白也能轻松理解的卡片组件指南
什么是卡片？
卡片（Card）是Bootstrap中一个灵活且可扩展的内容容器，它包含了页眉、页脚、内容、背景色等选项，非常适合展示相关内容块。
可以把它看作是一个信息盒子，用来整齐地展示文字、图片、按钮等内容。
1. 基本卡片结构
一个最简单的卡片包含以下结构：
<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>
<div class=”card-body”>
<h5 class=”card-title”>卡片标题</h5>
<p class=”card-text”>这里是卡片内容…</p>
<a href=”#” class=”btn btn-primary”>按钮</a>
</div>
</div>
注意： card-body 类是卡片内容的主要容器，大多数内容都应放在这里面。
2. 卡片组成部分详解
一个完整的卡片可以由多个部分组成：
页眉（Card Header）
主体（Card Body）
这里是卡片的主要内容区域。
带图片的卡片
图片可以放在顶部或底部。
带列表的卡片
- 列表项 1
- 列表项 2
- 列表项 3
带导航的卡片
可以在页眉中添加导航标签。
深色主题
特殊样式卡片
可以设置背景色、文字颜色等。
3. 卡片布局与排列
网格系统排列
使用Bootstrap的网格系统将卡片排列成多列布局。
卡片组
使用.card-group创建等高的卡片组。
卡片叠放
使用.card-deck或Flex布局实现卡片叠放效果。
<!– 卡片组 –>
<div class=”card-group”>
<div class=”card”>…</div>
<div class=”card”>…</div>
</div>
<!– 网格排列 –>
<div class=”row”>
<div class=”col-md-4″>
<div class=”card”>…</div>
</div>
<div class=”col-md-4″>
<div class=”card”>…</div>
</div>
</div>
<div class=”card-group”>
<div class=”card”>…</div>
<div class=”card”>…</div>
</div>
<!– 网格排列 –>
<div class=”row”>
<div class=”col-md-4″>
<div class=”card”>…</div>
</div>
<div class=”col-md-4″>
<div class=”card”>…</div>
</div>
</div>
4. 实际应用示例
产品展示卡片
用于电子商务网站展示产品信息。
¥199.00
用户信息卡片
张三
前端开发工程师
3年工作经验
卡片使用总结
卡片（Card）组件是Bootstrap中最常用且功能强大的组件之一
- 卡片是内容容器，可以包含标题、文本、图片、列表、按钮等
- 基本结构：
.card>.card-body - 主要组成部分：页眉（.card-header）、主体（.card-body）、页脚（.card-footer）
- 可以添加图片（.card-img-top / .card-img-bottom）
- 支持多种布局方式：网格布局、卡片组、卡片叠放
- 可以设置多种背景颜色和文字颜色
- 应用场景：产品展示、用户信息、博客文章、数据统计等
提示： 在实际开发中，卡片通常与Bootstrap的网格系统结合使用，创建响应式布局。