当前位置：首页 > news >正文

Bootstrap4 卡片

news 来源：原创 2025/6/19 15:05:42

Bootstrap4 卡片

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具，使得开发者可以快速构建响应式、美观的网页。其中，Bootstrap4 中的卡片组件（Card）是一个非常实用的功能，可以用来展示图片、文本等信息。本文将详细介绍 Bootstrap4 卡片的用法和技巧。

一、卡片的基本结构

Bootstrap4 中的卡片组件由以下几个部分组成：

.card：表示卡片容器。
.card-body：卡片内容区域。
.card-title：卡片标题。
.card-text：卡片正文内容。
.card-footer：卡片底部内容。

以下是一个基本的卡片结构示例：

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文内容...</p>
  </div>
  <div class="card-footer">
    <small class="text-muted">发布时间</small>
  </div>
</div>

二、卡片样式与布局

Bootstrap4 提供了多种卡片样式和布局，以满足不同场景的需求。

1. 基本样式

Bootstrap4 默认提供了以下几种卡片样式：

.card：基本样式，无特殊效果。
.card-primary：主要样式，背景色为蓝色。
.card-secondary：次要样式，背景色为灰色。
.card-success：成功样式，背景色为绿色。
.card-danger：危险样式，背景色为红色。
.card-warning：警告样式，背景色为橙色。

2. 布局

Bootstrap4 提供了以下几种卡片布局：

.card-deck：卡片水平排列。
.card-columns：卡片垂直排列。

以下是一个卡片水平排列的示例：

<div class="row">
  <div class="col-md-4">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="..." alt="...">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片正文内容...</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">发布时间</small>
      </div>
    </div>
  </div>
  <!-- ... -->
</div>

三、卡片组件的扩展

Bootstrap4 提供了以下卡片组件的扩展功能：

1. 卡片图像

通过 .card-img-top 类可以为卡片添加一个顶部图像。以下是一个示例：

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文内容...</p>
  </div>
  <div class="card-footer">
    <small class="text-muted">发布时间</small>
  </div>
</div>

2. 卡片内嵌

通过 .card-link 或 .btn 类可以为卡片添加内嵌链接或按钮。以下是一个示例：

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文内容...</p>
    <a href="#" class="card-link">更多详情</a>
  </div>
</div>

3. 卡片组

通过 .card-group 类可以将多个卡片组合在一起。以下是一个示例：

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="...">
    <div class="card-body">
      <h5 class="card-title">卡片标题</h5>
      <p class="card-text">卡片正文内容...</p>
    </div>
  </div>
  <!-- ... -->
</div>