Bootstrap 5 卡片

vicky.yu

卡片
Bootstrap 5 中的卡片是带边框的框，其内容周围有一些内边距。它包括页眉、页脚、内容、颜色等选项。


基础的卡片
一张基础卡片是用 .card 类创建的，卡片中的内容有一个 .card-body 类：


实例
<div class="card">
  <div class="card-body">基础的卡片</div>
</div>
亲自试一试
页眉和页脚

.card-header 类为卡片添加标题，.card-footer 类为卡片添加页脚：

实例
<div class="card">
  <div class="card-header">页眉</div>
  <div class="card-body">内容</div>
  <div class="card-footer">页脚</div>
</div>
亲自试一试
上下文卡片
如需为卡片添加背景颜色，请使用上下文类：

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light
实例
亲自试一试
标题、文本和链接

请使用 .card-title 将卡片标题添加到任意标题元素。如果 <p> 元素是 .card-body 中的最后一个子元素（或唯一一个子元素），则 .card-text 类用于移除 <p> 元素的底部边距。.card-link 类为任意链接添加蓝色和悬停效果。

实例
<div class="card">
  <div class="card-body">
    <h4 class="card-title">卡片标题</h4>
    <p class="card-text">一些实例文本。一些实例文本。</p>
    <a href="#" class="card-link">卡片链接</a>
    <a href="#" class="card-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="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">查看个人资料</a>
  </div>
</div>
亲自试一试
卡片图像叠加

将图像转换为卡片背景并使用 .card-img-overlay 在图像顶部添加文本：

实例
<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">查看个人资料</a>
  </div>
</div>
亲自试一试
BS5 列表组
BS5 下拉菜单

JavaScript 测验


W3School 简体中文版提供的内容仅用于培训和测