Bootstrap 卡片组件高级用法与创意设计
2026-06-12 ·
Bootstrap 卡片组件是最灵活的 UI 容器之一。除了基础用法，本文还将展示水平卡片、卡片组、覆盖层和动效的高级实现。
1. 水平卡片
使用网格系统将图片和文本并排排列：
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">水平卡片标题</h5>
<p class="card-text">水平布局适合图文混排场景。</p>
</div>
</div>
</div>
</div>
2. 卡片覆盖层
将文字叠加在图片上方：
<div class="card text-bg-dark">
<img src="/placeholder/600x300?seed=overlay" class="card-img" alt="背景">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title">覆盖层标题</h5>
<p class="card-text">文字浮于图片上方，多用于 Hero 区域。</p>
</div>
</div>
3. 卡片组与网格
使用 Bootstrap 网格系统创建等高的卡片网格：
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<div class="card-body"><h5>卡片 1</h5><p>所有卡片等高对齐。</p></div>
</div>
</div>
</div>
4. 悬浮动效
<div class="card h-100 border-0 shadow-sm transition">
<div class="card-body p-4">...</div>
</div>
<style>
.card.transition {
transition: transform .2s, box-shadow .2s;
}
.card.transition:hover {
transform: translateY(-4px);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
</style>
卡片组（.card-group）在多列时会自动等高，适合展示并列的产品或文章预览。