Bootstrap4 卡片

最新推荐文章于 2025-11-23 18:41:31 发布

原创最新推荐文章于 2025-11-23 18:41:31 发布 · 255 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Bootstrap4 卡片

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动优先的网站和应用程序。Bootstrap 提供了大量的组件和工具，其中之一就是卡片（Card）。卡片是一种灵活的容器，可以用来展示信息、图片、链接等。在 Bootstrap4 中，卡片组件得到了进一步的优化和改进。

卡片简介

Bootstrap4 的卡片组件是一种用于展示信息的容器，它具有以下特点：

灵活布局：卡片可以水平或垂直排列，可以嵌套，也可以与表格、列表等组件结合使用。
丰富的样式：卡片可以设置标题、正文、图片、按钮等元素，并支持多种样式，如卡片组、卡片标题、卡片图像等。
响应式设计：卡片支持响应式布局，可以适应不同屏幕尺寸的设备。

卡片的基本结构

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

.card：卡片容器
.card-body：卡片主体内容
.card-header：卡片头部，通常包含标题
.card-footer：卡片底部，通常包含按钮或其他操作

以下是一个简单的卡片示例：

<div class="card">
  <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>

卡片的样式

Bootstrap4 提供了多种卡片样式，以下是一些常用的样式：

卡片背景：使用 card-* 类来设置卡片的背景颜色。
卡片文本颜色：使用 card-*-text 类来设置卡片文本的颜色。
卡片阴影：使用 shadow-* 类来设置卡片的阴影效果。

以下是一个设置卡片背景、文本颜色和阴影的示例：

<div class="card bg-primary text-white">
  <div class="card-body">
    <h5 class="card-title text-white">卡片标题</h5>
    <p class="card-text text-white">这里是卡片的内容。</p>
    <a href="#" class="btn btn-light">按钮</a>
  </div>
</div>

卡片组

Bootstrap4 的卡片组（Card Deck）组件允许你将多个卡片垂直或水平排列在一起。以下是一个垂直排列的卡片组示例：

<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">这里是卡片的内容。</p>
      <a href="#" class="btn btn-primary">按钮</a>
    </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">这里是卡片的内容。</p>
      <a href="#" class="btn btn-primary">按钮</a>
    </div>
  </div>
</div>