Bootstrap 的卡片组件是一个非常强大的工具，可以用来展示内容。卡片可以包含文本、图像、按钮和其他交互元素。通过使用卡片组件，我们可以创建出既美观又实用的页面布局。
卡片的基本结构
一个卡片的基本结构由几个主要部分组成：
.card：卡片容器。.card-body：卡片的主要内容区域。.card-title：卡片的标题。.card-text：卡片中的文本内容。.card-img-top：卡片顶部的图片。.card-img-bottom：卡片底部的图片。
下面是一个基本的卡片示例：
<div class="card" style="width: 18rem;">
<img src="image.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>卡片头部和底部
除了基本内容之外，卡片还可以包含头部和底部部分。这些部分可以用来放置额外的信息或者导航链接。
卡片头部
使用 .card-header 类来定义卡片的头部：
-- -------------------- ---- -------
---- ------------ ------------- --------
---- --------------------
---- ------
------
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
------卡片底部
使用 .card-footer 类来定义卡片的底部：
-- -------------------- ---- -------
---- ------------ ------------- --------
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
---- --------------------
---- ------
------
------自定义卡片样式
Bootstrap 提供了多种方式来定制卡片的样式，包括颜色、阴影等。你可以通过添加自定义的 CSS 类或使用 Bootstrap 的预设类来改变卡片的外观。
改变背景颜色
通过添加 bg-* 类来改变卡片的背景颜色：
<div class="card bg-primary text-white" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Primary card</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>
</div>添加阴影效果
通过添加 shadow-* 类来为卡片添加不同的阴影效果：
<div class="card shadow-lg" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Shadow card</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>
</div>组合卡片
卡片也可以进行组合，形成更复杂的布局。例如，你可以将多张卡片放在一个容器中，从而创建出一个网格布局。
-- -------------------- ---- -------
---- ---------- ---------- ------------- -----
---- ------------
---- ----------- -------
---- --------- -------------------- ----------
---- ------------------
--- ----------------------- ----------
-- ---------------------- -- - ----- ---- ---- ---------- ---- ----- -- - ------- ------- -- ---------- -------- ---- ------- -- - ------ --- -----------
------
------
------
---- ------------
---- ----------- -------
---- --------- -------------------- ----------
---- ------------------
--- ----------------------- ----------
-- ---------------------- ---- --- ---------- ---- ----- -- - ------- ------- -- ---------- ------------
------
------
------
---- ---- ---
------卡片翻转效果
通过结合一些 JavaScript 和 CSS 技巧，可以实现卡片的翻转效果，增加互动性。
-- -------------------- ---- -------
---- ------------ ------------- --------
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
---- --------------------
------- ---------- ----------- -------------------
------
------
--------
--------------------------------------------------------- ---------- -
----- ---- - ----------------------
---------------------------------
---
---------
-------
------------- -----------
------------- ------------ -
---------- ----------------
-------------------- -------
-
------------- --------------
------------- ---------------- -
---------- -----------------
-------------------- -------
-
--------通过上述方法，你可以创建出各种类型的卡片，并且能够灵活地控制它们的外观和行为。Bootstrap 的卡片组件提供了丰富的功能，使得前端开发变得更加简单高效。