【Bootstrap V4系列】学习入门教程之 组件-卡片（Card）

卡片（Card）

Bootstrap的卡片提供了一个灵活且可扩展的内容容器，其中包含多种变体和选项。

一、Example

卡片尽可能少地使用标记和样式构建，但仍然能够提供大量的控制和定制。它们采用flexbox构建，易于对齐，并与其他Bootstrap组件很好地混合。默认情况下，它们没有边距，因此根据需要使用间距实用程序。

下面是一个具有混合内容和固定宽度的基本卡的示例。卡片开始时没有固定的宽度，因此它们自然会填充其父元素的整个宽度。这很容易通过我们的各种尺寸选项进行定制。

<!--Example-->
<div class="card" style="width: 18rem;"><img src="../images/a1.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

页面展示效果：

二、Content types 内容类型

卡片支持各种各样的内容，包括图像、文本、列表组、链接等。下面是支持的示例。

2.1 Body 主体

卡片的构建块是.card-body。每当你需要卡片中的填充部分时，都可以使用它。

<div class="card"><div class="card-body">This is some text within a card body.</div>
</div>

页面展示效果：

2.2 Titles, text, and links 标题、文本和链接

卡片标题是通过在<h*>标签中添加.card-title来使用的。同样，通过在<a>标签中添加.card-link，可以添加链接并将其放置在彼此旁边。

字幕是通过在<h*>标签中添加.card-subtitle字幕来使用的。如果.card-title和.card-subtitle副标题项放置在.card-body正文项中，则卡标题和副标题会很好地对齐。

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div>
</div>

页面展示效果：

2.3 Images 图片

.card-img-top 将图像放置在卡的顶部。使用.card-text文本，可以将文本添加到卡中。.card-text中的文本也可以使用标准HTML标签进行样式设置。

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div>
</div>

页面展示效果：

2.4 List groups 列表组

使用刷新列表组在卡片中创建内容列表。

<div class="card" style="width: 18rem;"><div class="card-header">Featured</div><ul class="list-group list-group-flush"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li></ul>
</div>

页面展示效果：

<div class="card" style="width: 18rem;"><ul class="list-group list-group-flush"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li></ul><div class="card-footer">Card footer</div>
</div>

页面展示效果：

2.5 Kitchen sink 洗涤槽

混合和匹配多种内容类型以创建所需的卡片，或将所有内容都放在其中。下面显示的是图像样式、块、文本样式和列表组，所有这些都包装在固定宽度的卡片中。

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><ul class="list-group list-group-flush"><li class="list-group-item">An item</li><li class="list-group-item">A second item</li><li class="list-group-item">A third item</li></ul><div class="card-body"><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div>
</div>

页面展示效果：

2.6 Header and footer 页眉和页脚

在卡片中添加可选的页眉和/或页脚。

<div class="card"><div class="card-header">Featured</div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

页面展示效果：

可以通过在<h*>元素中添加.card-header来设置卡头样式。

<div class="card"><h5 class="card-header">Featured</h5><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div>
</div>

页面展示效果：

设置页眉，卡片内容是块引用

<div class="card"><div class="card-header">Quote</div><div class="card-body"><blockquote class="blockquote mb-0"><p>A well-known quote, contained in a blockquote element.</p><footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></div>
</div>

页面展示效果：

设置页眉和页脚，卡片内容文本居中

<div class="card text-center"><div class="card-header">Featured</div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div><div class="card-footer text-muted">2 days ago</div>
</div>

页面展示效果：