Bootstrap 5 卡片
卡片
Bootstrap 5 中的卡片是一个有边框的盒子，其内容周围有一些填充物。它包括页眉、页脚、内容、颜色等选项。
基础卡片
我们可以通过 Bootstrap5 的 .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.
标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。
.card-text 类用于设置卡片正文的内容。
.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="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-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">一些示例文本。</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
亲自试一试 »
