Bootstrap5 卡片
卡片
Bootstrap 5 中的卡片是一个有边框的盒子，其内容周围有一些填充。它包括页眉、页脚、内容、颜色等选项。
基本卡
一张基本卡是用以下内容创建的.card类，并且卡片内的内容有.card-body类：
基本卡
页眉和页脚
标头
内容
页脚
这个.card-header类向卡片添加标题，并且.card-footer类向卡片添加页脚：
示例
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
亲自试一试 »
情境卡
要为卡片添加背景颜色，请使用上下文类 (.bg-primary, .bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark和.bg-light。
示例
Basic card
Primary card
Success card
Info card
Warning card
Danger card
Secondary card
Dark card
Light card
标题、文本和链接
使用.card-title将卡片标题添加到任何标题元素。这.card-text类用于删除 <p> 元素的底部边距（如果它是内部的最后一个子元素（或唯一的子元素））.card-body。这.card-link类为任何链接添加蓝色和悬停效果。
示例
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another 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="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
亲自试一试 »
卡片图片叠加
将图片转换为卡片背景并使用.card-img-overlay在图片顶部添加文本：
示例
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
亲自试一试 »
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!