Bootstrap4 卡片

最新推荐文章于 2025-04-29 14:21:45 发布

xyq2024

最新推荐文章于 2025-04-29 14:21:45 发布

阅读量410

点赞数 4

文章标签：开发语言

本文链接：https://blog.youkuaiyun.com/xyq2024/article/details/146992689

版权

Bootstrap4 卡片

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具，帮助开发者快速构建响应式和美观的网页。Bootstrap4 是 Bootstrap 的最新版本，它引入了许多新的特性和改进。其中，卡片（Card）组件是 Bootstrap4 中一个非常有用的工具，可以用来展示信息、图片、链接等。本文将详细介绍 Bootstrap4 卡片组件的使用方法、样式定制以及一些高级用法。

一、卡片组件的基本使用

Bootstrap4 的卡片组件非常简单易用。以下是一个基本的卡片示例：

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="image.jpg" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这里是卡片的内容...</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

在上面的示例中，我们创建了一个宽度为 18rem 的卡片。card-img-top 类用于设置卡片的顶部图片，card-body 类用于包含卡片的内容。card-title 类用于设置卡片的标题，card-text 类用于设置卡片的内容，btn btn-primary 类用于设置卡片中的按钮。

二、卡片样式定制

Bootstrap4 提供了丰富的卡片样式，你可以通过添加不同的类来定制卡片的外观。以下是一些常用的卡片样式：

card-deck：创建一个卡片堆叠效果。
card-group：创建一个卡片分组效果。
card-columns：创建一个卡片列效果。
card-body、card-title、card-text、card-footer：用于设置卡片内容的不同部分。
card-header、card-footer：用于设置卡片头部和尾部的内容。

以下是一个使用 card-deck 和 card-group 的示例：

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="image1.jpg" alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题1</h5>
      <p class="card-text">这里是卡片内容1...</p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="image2.jpg" alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题2</h5>
      <p class="card-text">这里是卡片内容2...</p>
    </div>
  </div>
</div>

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="image3.jpg" alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题3</h5>
      <p class="card-text">这里是卡片内容3...</p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="image4.jpg" alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题4</h5>
      <p class="card-text">这里是卡片内容4...</p>
    </div>
  </div>
</div>

三、卡片的高级用法

Bootstrap4 的卡片组件还支持一些高级用法，例如：

card-header 和 card-footer：用于添加卡片的头部和尾部内容。
card-block：用于包裹卡片内容。
card-link 和 card-text：用于设置卡片中的链接和文本。

以下是一个使用 card-header 和 card-footer 的示例：

<div class="card">
  <div class="card-header">卡片头部</div>
  <img class="card-img-top" src="image.jpg" alt="...">
  <div class="card-block">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">这里是卡片内容...</p>
  </div>
  <div class="card-footer">卡片尾部</div>
</div>