Bootstrap 5 卡片
卡片
Bootstrap 5 中的卡片是一个带边框的方框，周围的内容有一些填充。它包括标题、页脚、内容、颜色等选项。
基本卡片
基本卡片使用 .card 类创建，卡片内部的内容具有 .card-body 类
基本卡片
标题和页脚
标题
内容
The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card
示例
<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 类用于删除 <p> 元素的底部边距，前提是它是在 .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>
自己试试 »
卡片图片
在 <img> 中添加 .card-img-top 或 .card-img-bottom 以将图片放置在卡片的顶部或底部。请注意，我们将图片添加到 .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>
自己试试 »
