Bootstrap 5 中的卡片是一个有边框的盒子,其内容周围有一些填充。它包括页眉、页脚、内容、颜色等选项。
一张基本卡是用以下内容创建的.card
类,并且卡片内的内容有.card-body
类:
这个.card-header
类向卡片添加标题,并且.card-footer
类向卡片添加页脚:
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
亲自试一试 »
要为卡片添加背景颜色,请使用上下文类 (.bg-primary
, .bg-success
,.bg-info
,.bg-warning
,.bg-danger
,.bg-secondary
,.bg-dark
和.bg-light
。
使用.card-title
将卡片标题添加到任何标题元素。这.card-text
类用于删除 <p> 元素的底部边距(如果它是内部的最后一个子元素(或唯一的子元素)).card-body
。这.card-link
类为任何链接添加蓝色和悬停效果。
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
亲自试一试 »
添加.card-img-top
或者.card-img-bottom
到一个 <img>
将图片放置在卡片内的顶部或底部。请注意,我们已将图片添加到.card-body
跨越整个宽度:
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
亲自试一试 »
将图片转换为卡片背景并使用.card-img-overlay
在图片顶部添加文本:
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
亲自试一试 »
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!