Bootstrap4 卡片
卡片
Bootstrap 4 中的卡片是一个有边框的盒子，其内容周围有一些填充。它包括页眉、页脚、内容、颜色等选项。
基本卡片
一张基本卡是用以下内容创建的.card类，并且卡片内的内容有.card-body类：
如果您熟悉 Bootstrap 3，卡片将取代旧的面板、孔和缩略图。
页眉和页脚
这个.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类用于删除 <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>
亲自试一试 »
拉伸链接
添加.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">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</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">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">Some text inside the fifth card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">Some text inside the sixth card</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">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
亲自试一试 »
卡组
第一张卡片内的一些文字
更多文字以增加高度
更多文字以增加高度
更多文字以增加高度
第二张卡片内的一些文字
第三张卡内的一些文字
第四张卡内的一些文字
这个.card-group类类似于.card-deck。唯一的区别是.card-groupclass 删除每张卡之间的左右边距。
笔记：卡片在小屏幕（小于 576px）上垂直显示，和顶部和底部边距：
示例
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
亲自试一试 »