Bootstrap - 卡片：初学者指南

你好啊，未来的网页开发者们！今天，我们将一起探索Bootstrap卡片的奇妙世界。作为你友好的计算机老师邻居，我很兴奋能引导你们进行这次旅程。让我们想象我们正在一起构建一个数字剪贴簿——这正是我们使用Bootstrap卡片要做的事情！

什么是Bootstrap卡片？

在我们跳入代码之前，先来理解一下Bootstrap卡片是什么。把它想象成一个灵活的容器，就像一个盒子，你可以放入不同类型的内容——文本、图片、链接等等。它就像是你小时候可能收集过的交易卡片的数字版本，但更酷、更多功能！

基本卡片结构

让我们从最基本的卡片结构开始：

<div class="card">
<div class="card-body">
<h5 class="card-title">你好，我是一个卡片！</h5>
<p class="card-text">我可以包含各种有趣的信息。</p>
</div>
</div>

这段代码创建了一个带有标题和一些文本的简单卡片。card类创建容器，card-body包裹内容。

内容类型

现在，让我们探索我们可以放入卡片中的不同类型的内容：

标题、文本和链接

<div class="card">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
<p class="card-text">一些快速示例文本，用于在卡片标题上构建，并组成卡片内容的主体。</p>
<a href="#" class="card-link">卡片链接</a>
<a href="#" class="card-link">另一个链接</a>
</div>
</div>

这个示例展示了我们如何在卡片中添加副标题、更多文本和链接。就像在我们的数字剪贴簿页面上添加不同的部分！

图片

让我们添加一些视觉吸引力——图片：

<div class="card">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">看看这张美丽的图片！</p>
</div>
</div>

card-img-top类将图片放置在卡片的顶部。就像在剪贴簿页面的顶部贴上一张照片！

列表组

我们甚至可以在卡片中添加列表：

<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">一个项目</li>
<li class="list-group-item">第二个项目</li>
<li class="list-group-item">第三个项目</li>
</ul>
</div>

这创建了一个带有列表的卡片。非常适合待办事项或项目符号列表！

大杂烩

现在，让我们把我们学到的所有东西结合到一个“大杂烩”卡片中：

<div class="card" style="width: 18rem;">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">一些快速示例文本，用于在卡片标题上构建，并组成卡片内容的主体。</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">一个项目</li>
<li class="list-group-item">第二个项目</li>
<li class="list-group-item">第三个项目</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">卡片链接</a>
<a href="#" class="card-link">另一个链接</a>
</div>
</div>

这张卡片拥有所有东西——图片、标题、文本、列表和链接。它就像是卡片的瑞士军刀！

头部和尾部

我们可以在卡片中添加头部和尾部以获得额外的结构：

<div class="card">
<div class="card-header">
特色
</div>
<div class="card-body">
<h5 class="card-title">特殊标题处理</h5>
<p class="card-text">下面有支持文本，作为附加内容的自然引导。</p>
<a href="#" class="btn btn-primary">去某个地方</a>
</div>
<div class="card-footer text-muted">
2天前
</div>
</div>

头部和尾部使我们的卡片看起来更整洁。

大小

我们可以使用网格类或自定义CSS来控制卡片的大小：

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">这张卡片宽75%。</p>
</div>
</div>

这张卡片将占据其容器宽度的75%。

使用网格标记

我们可以使用Bootstrap的网格系统来组织卡片：

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">特殊标题处理</h5>
<p class="card-text">下面有支持文本，作为附加内容的自然引导。</p>
<a href="#" class="btn btn-primary">去某个地方</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">特殊标题处理</h5>
<p class="card-text">下面有支持文本，作为附加内容的自然引导。</p>
<a href="#" class="btn btn-primary">去某个地方</a>
</div>
</div>
</div>
</div>

这在大屏幕上创建两个并排的卡片，在小屏幕上堆叠。

导航

我们甚至可以将卡片变成导航元素：

<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活跃</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">特殊标题处理</h5>
<p class="card-text">下面有支持文本，作为附加内容的自然引导。</p>
<a href="#" class="btn btn-primary">去某个地方</a>
</div>
</div>

这创建了一个带有顶部导航标签的卡片。

卡片样式

Bootstrap为卡片提供了各种样式：

背景和颜色

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">头部</div>
<div class="card-body">
<h5 class="card-title">主要卡片标题</h5>
<p class="card-text">一些快速示例文本，用于在卡片标题上构建，并组成卡片内容的主体。</p>
</div>
</div>

这创建了一个带有白色文本的蓝色卡片。你可以将bg-primary替换为其他颜色类，如bg-success、bg-warning等。

结论

就这样，伙计们！我们一起穿越了Bootstrap卡片的土地，从基本结构到高级布局。记住，熟能生巧。尝试组合不同的元素和样式来创建你独特的卡片。谁知道呢？你可能会创造出网页设计中的下一个大热门！以下是总结我们今天所学的主要Bootstrap卡片类的表格：

类名	描述
.card	创建基本卡片容器
.card-body	包裹卡片内容
.card-title	设置卡片标题样式
.card-text	设置卡片文本样式
.card-link	设置卡片内链接样式
.card-img-top	在卡片顶部放置图片
.card-header	创建卡片头部
.card-footer	创建卡片尾部
.bg-*	改变卡片背景颜色
.text-*	改变卡片文本颜色

现在去创造惊人的卡片布局吧！记住，在网页开发中，就像在生活中一样，最重要的是跳出盒子思考——或者在这个案例中，是在卡片内思考！快乐编码！

Credits: Image by storyset