Bootstrap 5 卡片
卡片
Bootstrap 5 中的卡片是一个带边框的盒子，内容四周有内边距。它包括标题、页脚、内容、颜色等选项。
基本卡片
基本卡片使用 .card 类创建，卡片内的内容具有 .card-body 类
基本卡片
标题和页脚
Header
内容
使用 .card-header 类为卡片添加标题，使用 .card-footer 类添加页脚
示例
<div class="card">
<div class="card-header">标题</div>
<div class="card-body">内容</div>
<div class="card-footer">页脚</div>
</div>
自己动手试一试 »
上下文卡片
要为卡片添加背景色，请使用上下文类（.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light）。
标题、文本和链接
使用 .card-title 为任何标题元素添加卡片标题。如果 .card-text 类是 .card-body 中的最后一个（或唯一一个）子元素，它将用于删除底部的外边距。 .card-link 类为任何链接添加蓝色，并带有悬停效果。
示例
<div class="card">
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">一些示例文字。一些示例文字。</p>
<a href="#" class="card-link">卡片链接</a>
<a href="#" class="card-link">另一个链接</a>
</div>
</div>
自己动手试一试 »
卡片图片
在卡片中添加 .card-img-top 或 .card-img-bottom 到 <img> 元素，可以将图片放置在卡片的顶部或底部。请注意，我们将图片放在 .card-body 的外部，以使其占据整个宽度
示例
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="卡片图像">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">一些示例文本。</p>
<a href="#" class="btn btn-primary">查看个人资料</a>
</div>
</div>
自己动手试一试 »
卡片图像叠加
将图像变成卡片背景，并使用 .card-img-overlay 在图像顶部添加文本
示例
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="卡片图像">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">一些示例文本。</p>
<a href="#" class="btn btn-primary">查看个人资料</a>
</div>
</div>
自己动手试一试 »
