什么是 Bootstrap5 卡片：前端设计的“小盒子”
在网页开发中，我们常常需要展示一些独立的信息单元，比如产品介绍、文章摘要、用户资料、服务功能等。这些信息往往具有清晰的边界和独立的结构，这时候，Bootstrap5 卡片就显得尤为实用。
你可以把 Bootstrap5 卡片 想象成一个“小盒子”——它不依赖复杂的布局系统，却能容纳文字、图片、按钮、链接等多种内容，同时自带圆角、阴影、边框等视觉效果，让页面看起来整洁又现代。它就像网页上的“积木块”，拼一拼就能搭建出美观的界面。
Bootstrap5 卡片并非新发明，但它的简洁性、响应式能力和与框架的深度集成，让它成为现代前端开发中不可或缺的组件。无论是展示商品、文章列表，还是用户卡片，Bootstrap5 卡片都能快速实现。
基础卡片结构：搭建你的第一个卡片
要使用 Bootstrap5 卡片，首先需要引入 Bootstrap5 的 CSS 文件。在 HTML 文件的 <head> 中加入如下链接：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
接下来，我们来创建一个最基础的卡片。Bootstrap5 卡片的核心结构非常简单，只需一个 div，并添加几个关键的类名。
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">
这是一段简短的卡片内容，用来描述某个功能或信息。
</p>
<a href="#" class="btn btn-primary">了解更多</a>
</div>
</div>
代码解析（重点注释）：
class="card"：这是卡片的根容器，Bootstrap 会自动为其添加边框、圆角和阴影效果。style="width: 18rem;"：设置卡片的宽度为 18 个字体单位（约 288px），便于控制布局。class="card-body"：用于包裹卡片内的内容区域，提供内边距（padding），避免内容紧贴边缘。class="card-title"：用于标题，自动添加字体大小和粗细样式。class="card-text"：用于正文段落，提供合适的字体大小和行高。class="btn btn-primary"：按钮使用 Bootstrap 的按钮类，btn-primary表示主色调按钮。
这个结构虽然简单，但已经具备了完整的卡片功能。你可以将它嵌入到任何页面中，快速展示一条信息。
卡片的三大组成部分：标题、主体与脚部
Bootstrap5 卡片的设计逻辑非常清晰，分为三个主要部分：标题（title）、主体（body） 和 脚部（footer）。理解这三个部分，是掌握卡片布局的关键。
标题：卡片的“门面”
标题通常位于卡片顶部，用来快速传达核心信息。你可以使用 card-title 类来设置标题，也可以直接使用 h1 到 h6 标签。
<div class="card">
<div class="card-header">
<h5 class="card-title">今日推荐</h5>
</div>
<div class="card-body">
<p class="card-text">今天为您推荐三款高性价比产品。</p>
</div>
</div>
class="card-header"：用于创建卡片头部区域，通常包含标题或分类标签。card-title：确保标题样式统一，不被其他样式覆盖。
💡 小贴士：使用
card-header可以让标题区域与主体区分开，视觉上更清晰，也便于后期样式调整。
主体：卡片的“内容核心”
主体区域是卡片中承载主要信息的地方，比如文字、列表、图片、表单等。它通过 card-body 类包裹，确保有合适的内边距。
<div class="card">
<div class="card-body">
<h5 class="card-title">产品名称</h5>
<p class="card-text">这款产品支持快速充电，续航长达 48 小时。</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">充电速度：30 分钟充至 80%</li>
<li class="list-group-item">电池容量：10000mAh</li>
<li class="list-group-item">支持无线充电</li>
</ul>
</div>
</div>
list-group和list-group-flush：用于创建无边框的列表，让内容更紧凑。list-group-item：列表项，自动添加间距和边框。
脚部：卡片的“收尾动作”
脚部区域通常用于放置操作按钮、链接或说明文字。使用 card-footer 类即可实现。
<div class="card">
<div class="card-body">
<h5 class="card-title">用户反馈</h5>
<p class="card-text">用户评分：⭐⭐⭐⭐⭐（4.9/5）</p>
</div>
<div class="card-footer text-muted">
发布于 2024 年 4 月 5 日
</div>
</div>
text-muted：让脚部文字显示为灰色，表示辅助信息，不抢主视觉。
卡片变体：不同风格的卡片
Bootstrap5 提供了多种卡片变体，让你可以根据场景选择合适的样式。常见的有：
bg-primary：主色调背景bg-success：成功色背景（绿色）bg-warning：警告色背景（黄色）bg-danger：危险色背景（红色）
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">重要通知</h5>
<p class="card-text">请在本周五前完成任务提交。</p>
</div>
</div>
text-white：确保文字在深色背景上可读。- 背景色类名直接加在
card上，即可改变整个卡片的颜色。
你还可以结合 border 类实现边框样式，比如：
<div class="card border-danger">
<div class="card-body">
<h5 class="card-title">错误提示</h5>
<p class="card-text">请检查输入内容是否正确。</p>
</div>
</div>
响应式卡片：适配手机与桌面
Bootstrap5 卡片天生具备响应式能力。当你在小屏幕上查看页面时，卡片会自动调整布局，比如从横向排列变为纵向堆叠。
如果你需要多个卡片并列展示，可以使用 card-group、card-deck 或 card-columns。
使用 card-group 实现卡片组
<div class="card-group">
<div class="card">
<img src="product1.jpg" class="card-img-top" alt="产品1">
<div class="card-body">
<h5 class="card-title">产品 A</h5>
<p class="card-text">价格：¥199</p>
</div>
</div>
<div class="card">
<img src="product2.jpg" class="card-img-top" alt="产品2">
<div class="card-body">
<h5 class="card-title">产品 B</h5>
<p class="card-text">价格：¥299</p>
</div>
</div>
<div class="card">
<img src="product3.jpg" class="card-img-top" alt="产品3">
<div class="card-body">
<h5 class="card-title">产品 C</h5>
<p class="card-text">价格：¥399</p>
</div>
</div>
</div>
card-group：让多个卡片等高对齐，适合展示并列内容。card-img-top：图片自动置于卡片顶部，确保布局统一。
在移动端，这些卡片会自动堆叠成一列，无需额外媒体查询。
高级用法：卡片嵌套与自定义样式
你还可以在卡片内部嵌套其他卡片，或者结合 Bootstrap 的其他组件（如轮播图、表单）来增强功能。
例如，创建一个带轮播图的卡片：
<div class="card">
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="幻灯片 1">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="幻灯片 2">
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">轮播卡片</h5>
<p class="card-text">通过轮播图展示多张图片，提升视觉吸引力。</p>
</div>
</div>
data-bs-ride="carousel"：启用轮播功能。carousel-inner和carousel-item：轮播内容容器与单个幻灯片。
总结：Bootstrap5 卡片的实用价值
Bootstrap5 卡片是一个高度模块化、易于扩展的组件，它让开发者能够以极低的成本构建美观、响应式的界面。无论是简单的信息展示，还是复杂的商品列表，只要合理使用 card、card-body、card-header 等类名，就能快速实现。
它最大的优势在于“开箱即用”——无需编写 CSS 样式，就能获得现代感十足的视觉效果。同时，它与 Bootstrap5 的其他组件无缝衔接，比如按钮、表单、轮播图等，极大提升了开发效率。
对于初学者而言，掌握 Bootstrap5 卡片是迈向前端实战的重要一步。它不仅帮助你理解 HTML 和 CSS 的布局逻辑，也让你提前接触“组件化开发”的思想。
如果你正在构建一个博客、产品展示页或后台管理界面，不妨从一个 Bootstrap5 卡片开始。你会发现，原来设计一个好看的页面，也可以如此简单。