Bootstrap5 卡片学习笔记

什么是卡片？

卡片（card）是一种常见的 UI 元素，通常用于展示内容。它们可以包含文本、图片、链接等各种元素，可以单独使用或组合在一起展示信息。

卡片的基本结构

在 Bootstrap 中，卡片由 .card 类进行定义。下面是卡片的基本结构：

htmlCopy Code
<div class="card">
	<div class="card-body">
		<!-- 卡片内容 -->
	</div>
</div>

其中，.card-body 是卡片内容的容器，我们可以在这里放置各种元素，比如标题、文本、图片等。

卡片样式

Bootstrap 提供了丰富的卡片样式，我们可以根据需要选择不同的样式类型。

默认样式

默认样式就是最简单的卡片，没有任何背景色或边框。

htmlCopy Code
<div class="card">
	<div class="card-body">
		<!-- 卡片内容 -->
	</div>
</div>

卡片标题和文本

卡片可以包含标题和文本，可以使用 .card-title 和 .card-text 类来设置。

htmlCopy Code
<div class="card">
	<div class="card-body">
		<h5 class="card-title">卡片标题</h5>
		<p class="card-text">卡片文本内容</p>
	</div>
</div>

图片卡片

图片卡片可以使用 .card-img-top 类来设置图片，并配合 .card-title 和 .card-text 类来添加标题和文本。

htmlCopy Code
<div class="card">
	<img src="图片地址" class="card-img-top" alt="图片说明">
	<div class="card-body">
		<h5 class="card-title">卡片标题</h5>
		<p class="card-text">卡片文本内容</p>
	</div>
</div>

颜色样式

卡片也可以设置不同的颜色样式，比如使用 .bg-primary 类来设置主题色背景。

htmlCopy Code
<div class="card bg-primary text-white">
	<div class="card-body">
		<h5 class="card-title">卡片标题</h5>
		<p class="card-text">卡片文本内容</p>
	</div>
</div>

卡片实例

下面是一个简单的卡片实例，包含了图片、标题和文本。

htmlCopy Code
<div class="card">
	<img src="https://via.placeholder.com/150" class="card-img-top" alt="卡片图片">
	<div class="card-body">
		<h5 class="card-title">卡片标题</h5>
		<p class="card-text">卡片文本内容</p>
	</div>
</div>

结语

卡片是一个非常常见的 UI 元素，可以用来展示各种信息。Bootstrap 提供了丰富的卡片样式，我们可以根据需要灵活使用。