Bootstrap 5 | 卡片

Bootstrap 是一个流行的前端框架，适用于构建响应式和现代化的网站和应用程序。其中一个最常用和重要的组件就是卡片（Cards）。卡片提供了一种简单而灵活的方式来组织和展示内容。在本文中，我们将详细介绍 Bootstrap 5 中的卡片组件。

引入卡片

要使用 Bootstrap 的卡片组件，需要先引入 Bootstrap 的 CSS 和 JavaScript 文件。可以通过直接下载文件或使用 CDN 来引入。

<!-- 引入 Bootstrap 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

创建卡片

在 Bootstrap 5 中，可以使用 <div> 元素与 card 类来创建一个基本的卡片。可以通过添加不同的类来修改卡片的样式。

<div class="card">
  <!-- 卡片内容 -->
</div>

卡片标题和文本

在卡片中，可以使用 <div> 元素与 card-body 类来包裹卡片的标题和文本内容。

<div class="card">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

图片卡片

除了文本内容，卡片还可以包含图片。只需在卡片的内容部分添加一个 <img> 元素，并为其指定样式类 card-img-top。

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="图片">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

卡片样式

Bootstrap 5 提供了一些用于自定义卡片样式的类。下面是一些常用的卡片类：

• card-primary
• card-secondary
• card-success
• card-danger
• card-warning
• card-info
• card-light
• card-dark

<div class="card card-primary">
  <!-- 卡片内容 -->
</div>

卡片大小

卡片的大小可以通过添加类 card-{size} 来指定，其中 {size} 可以是下列值之一：sm、md、lg 或 xl。

<div class="card card-md">
  <!-- 卡片内容 -->
</div>

以上是 Bootstrap 5 中使用卡片的相关信息。通过灵活使用不同的类和元素，可以轻松创建出各种不同样式和布局的卡片。

详细资料可以参考 Bootstrap 文档。