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 类来定义卡片的头部：
// www.javascriptcn.com code example
<div class="card" style="width: 18rem;">
<div class="card-header">
Card Header
</div>
<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>
</div>卡片底部
使用 .card-footer 类来定义卡片的底部：
// www.javascriptcn.com code example
<div class="card" style="width: 18rem;">
<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>
<div class="card-footer">
Card Footer
</div>
</div>自定义卡片样式
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>组合卡片
卡片也可以进行组合，形成更复杂的布局。例如，你可以将多张卡片放在一个容器中，从而创建出一个网格布局。
// www.javascriptcn.com code example
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<!-- 更多卡片 -->
</div>卡片翻转效果
通过结合一些 JavaScript 和 CSS 技巧，可以实现卡片的翻转效果，增加互动性。
// www.javascriptcn.com code example
<div class="card" style="width: 18rem;">
<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>
<div class="card-footer">
<button class="btn btn-primary flip">Flip</button>
</div>
</div>
<script>
document.querySelector('.flip').addEventListener('click', function() {
const card = this.closest('.card');
card.classList.toggle('flipped');
});
</script>
<style>
.card.flipped .card-body,
.card.flipped .card-footer {
transform: rotateX(180deg);
backface-visibility: hidden;
}
.card.flipped .card-img-top,
.card.flipped .card-img-bottom {
transform: rotateX(-180deg);
backface-visibility: hidden;
}
</style>通过上述方法，你可以创建出各种类型的卡片，并且能够灵活地控制它们的外观和行为。Bootstrap 的卡片组件提供了丰富的功能，使得前端开发变得更加简单高效。