Bootstrap5 卡片组件

Bootstrap 5 卡片组件

学习如何使用Bootstrap 5的卡片组件，创建灵活且强大的内容容器，用于展示各种类型的内容。

开始学习
卡片示例

这是一个基础卡片组件示例，展示了卡片的基本结构。

了解更多
基础卡片 卡片内容 卡片图片 卡片样式 页眉和页脚 卡片尺寸 卡片导航 卡片网格 卡片组 自定义卡片

基础卡片

使用.card和.card-body类创建基础卡片组件。

基础卡片示例
卡片标题
卡片副标题

这是一些示例文本，用于构建卡片的内容并占位。这部分内容稍长一些，以便您了解卡片的外观。

卡片链接 另一个链接 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
    <p class="card-text">这是一些示例文本，用于构建卡片的内容并占位。这部分内容稍长一些，以便您了解卡片的外观。</p>
    <a href="#" class="card-link">卡片链接</a>
    <a href="#" class="card-link">另一个链接</a>
  </div>
</div>

卡片内容

卡片支持多种内容类型，包括标题、文本、链接、列表等。

卡片内容类型示例
卡片标题

这是一个简单的卡片示例，包含标题、文本和按钮。

前往页面 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这是一个简单的卡片示例，包含标题、文本和按钮。</p>
    <a href="#" class="btn btn-primary">前往页面</a>
  </div>
</div>

卡片图片

使用.card-img-top或.card-img-bottom在卡片中添加图片。

带图片的卡片示例
示例图片
卡片标题

这是一张带有图片的卡片。图片位于卡片内容的顶部。

了解更多 
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="示例图片">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这是一张带有图片的卡片。图片位于卡片内容的顶部。</p>
    <a href="#" class="btn btn-primary">了解更多</a>
  </div>
</div>
图片覆盖卡片示例
示例图片
图片覆盖卡片

这是一个带有图片覆盖的卡片示例。文本内容显示在图片上方。

最后更新 3 分钟前

<div class="card text-white">
  <img src="https://via.placeholder.com/600x400" class="card-img" alt="示例图片">
  <div class="card-img-overlay card-img-overlay-dark">
    <h5 class="card-title">图片覆盖卡片</h5>
    <p class="card-text">这是一个带有图片覆盖的卡片示例。文本内容显示在图片上方。</p>
    <p class="card-text"><small>最后更新 3 分钟前</small></p>
  </div>
</div>

卡片样式

使用Bootstrap的背景和边框工具类来自定义卡片的外观。

背景和边框样式示例
页眉
主要卡片标题

一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。

页眉
次要卡片标题

一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。

页眉
成功卡片标题

一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。

页眉
危险卡片标题

一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。

页眉
警告卡片标题

一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。

页眉
信息卡片标题

一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。

<!-- 主要卡片 -->
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">页眉</div>
  <div class="card-body">
    <h5 class="card-title">主要卡片标题</h5>
    <p class="card-text">一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。</p>
  </div>
</div>

<!-- 次要卡片 -->
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">页眉</div>
  <div class="card-body">
    <h5 class="card-title">次要卡片标题</h5>
    <p class="card-text">一些快速示例文本，用于构建卡片的标题并构成卡片内容的大部分。</p>
  </div>
</div>

<!-- 更多颜色变体... -->

卡片尺寸

使用网格类、工具类或自定义CSS来控制卡片的尺寸。

卡片尺寸示例
特殊标题处理

使用支持额外内容的卡页眉和页脚。

前往页面
特殊标题处理

使用支持额外内容的卡页眉和页脚。

前往页面 
<div class="row">
  <div class="col-sm-6 mb-3">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">使用支持额外内容的卡页眉和页脚。</p>
        <a href="#" class="btn btn-primary">前往页面</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">特殊标题处理</h5>
        <p class="card-text">使用支持额外内容的卡页眉和页脚。</p>
        <a href="#" class="btn btn-primary">前往页面</a>
      </div>
    </div>
  </div>
</div>

卡片网格

使用网格系统创建卡片网格布局。

卡片网格示例
...
卡片标题

这是一个更长的卡片，支持其下方的内容作为自然引导，内容稍长。

最后更新 3 分钟前
...
卡片标题

这是一个简短的卡片。

最后更新 3 分钟前
...
卡片标题

这是一个更长的卡片，支持其下方的内容作为自然引导，内容稍长。此内容稍长，以显示卡片之间的高度匹配。

最后更新 3 分钟前 
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/200x150" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">这是一个更长的卡片，支持其下方的内容作为自然引导，内容稍长。</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">最后更新 3 分钟前</small>
      </div>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

卡片组

使用卡片组将多个卡片作为单个附加元素。

卡片组示例
...
卡片标题

这是一个更宽的卡片，支持其下方的内容作为自然引导，内容稍长。此内容稍长，以显示卡片之间的高度匹配。

最后更新 3 分钟前

...
卡片标题

这个卡片有支持文本下方作为自然引导的内容。

最后更新 3 分钟前

...
卡片标题

这是一个更宽的卡片，支持其下方的内容作为自然引导，内容稍长。此内容稍长，以显示卡片之间的高度匹配。

最后更新 3 分钟前

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题</h5>
      <p class="card-text">这是一个更宽的卡片，支持其下方的内容作为自然引导，内容稍长。此内容稍长，以显示卡片之间的高度匹配。</p>
      <p class="card-text"><small class="text-muted">最后更新 3 分钟前</small></p>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

自定义卡片

使用自定义CSS创建独特的卡片样式。

自定义卡片示例
自定义卡片
特殊标题处理

使用支持额外内容的卡页眉和页脚。

前往页面 
<!-- HTML -->
<div class="card card-custom card-hover" style="width: 18rem;">
  <div class="card-header">
    自定义卡片
  </div>
  <div class="card-body">
    <h5 class="card-title">特殊标题处理</h5>
    <p class="card-text">使用支持额外内容的卡页眉和页脚。</p>
    <a href="#" class="btn btn-outline-primary">前往页面</a>
  </div>
</div>

<!-- CSS -->
<style>
.card-custom {
    border-color: #6f42c1;
}

.card-custom .card-header {
    background-color: #6f42c1;
    color: white;
}

.card-hover {
    transition: transform 0.3s, box-shadow 0.3s;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
</style>
上一章: 列表组 下一章: 下拉菜单