Bootstrap 4 Cards
卡片
Bootstrap 4 中的卡片是一个带有边框的框，其内容周围有一些内边距。它包括页眉、页脚、内容、颜色等的选项。
基本卡片
基本卡片是通过 .card 类创建的，卡片内的内容具有 .card-body 类
如果您熟悉 Bootstrap 3，卡片将取代旧的面板、井和缩略图。
页眉和页脚
.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-body 中的 <p> 元素是最后一个子元素（或唯一子元素），则使用 .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">查看个人资料</a>
</div>
</div>
自己动手试一试 »
拉伸链接
在卡片内的链接中添加 .stretched-link 类，它将使整个卡片可点击且可悬停（卡片将充当链接）
卡片图片叠加
将图片变成卡片背景，并使用 .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">查看个人资料</a>
</div>
</div>
自己动手试一试 »
卡片列
第一个卡片中的一些文本
第二个卡片中的一些文本
第三个卡片中的一些文本
第四个卡片中的一些文本
第五个卡片中的一些文本
第六个卡片中的一些文本
.card-columns 类创建一个类似拼贴画的卡片网格（类似于 Pinterest）。插入更多卡片时，布局会自动调整。
注意：卡片在小屏幕（小于 576px）上垂直显示
示例
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">第一个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">第二个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">第三个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">第四个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">第五个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">第六个卡片中的一些文本</p>
</div>
</div>
</div>
自己动手试一试 »
卡片组
第一个卡片中的一些文本
更多文本以增加高度
更多文本以增加高度
更多文本以增加高度
第二个卡片中的一些文本
第三个卡片中的一些文本
第四个卡片中的一些文本
.card-deck 类创建一个**高度和宽度相等**的卡片网格。插入更多卡片时，布局会自动调整。
注意：卡片在小屏幕（小于 576px）上垂直显示
示例
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">第一个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">第二个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">第三个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">第四个卡片中的一些文本</p>
</div>
</div>
</div>
自己动手试一试 »
卡片分组
第一个卡片中的一些文本
更多文本以增加高度
更多文本以增加高度
更多文本以增加高度
第二个卡片中的一些文本
第三个卡片中的一些文本
第四个卡片中的一些文本
.card-group 类类似于 .card-deck。唯一的区别是 .card-group 类消除了每张卡片之间的左右边距。
注意：卡片在小屏幕（小于 576px）上垂直显示，**带有**上下边距
示例
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">第一个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">第二个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">第三个卡片中的一些文本</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">第四个卡片中的一些文本</p>
</div>
</div>
</div>
自己动手试一试 »
