Bootstrap5 卡片


卡片

Bootstrap 5 中的卡片是一个有边框的盒子,其内容周围有一些填充。它包括页眉、页脚、内容、颜色等选项。

image

约翰·多伊

一些示例文本 一些示例文本。 John Doe 是一位建筑师和工程师

查看简介

基本卡

一张基本卡是用以下内容创建的.card类,并且卡片内的内容有.card-body类:

基本卡

示例

<div class="card">
  <div class="card-body">Basic card</div>
</div>
亲自试一试 »

页眉和页脚

标头
内容

这个.card-header类向卡片添加标题,并且.card-footer类向卡片添加页脚:

示例

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>
亲自试一试 »

情境卡

要为卡片添加背景颜色,请使用上下文类 (.bg-primary, .bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark.bg-light

示例

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card
亲自试一试 »


标题、文本和链接

卡标题

一些示例文本。一些示例文本。

卡片链接 另一个链接

使用.card-title将卡片标题添加到任何标题元素。这.card-text类用于删除 <p> 元素的底部边距(如果它是内部的最后一个子元素(或唯一的子元素)).card-body。这.card-link类为任何链接添加蓝色和悬停效果。

示例

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
亲自试一试 »

卡片图片

Card image

约翰·多伊

一些示例文本 一些示例文本。 John Doe 是一位建筑师和工程师

查看简介

简·无名氏

一些示例文本 一些示例文本。 Jane Doe 是一位建筑师和工程师

查看简介
Card image

添加.card-img-top或者.card-img-bottom到一个 <img>将图片放置在卡片内的顶部或底部。请注意,我们已将图片添加到.card-body跨越整个宽度:

示例

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>
亲自试一试 »

卡片图片叠加

Card image

约翰·多伊

一些示例文本 一些示例文本。一些示例文本 一些示例文本。一些示例文本 一些示例文本。一些示例文本 一些示例文本。

查看简介

将图片转换为卡片背景并使用.card-img-overlay在图片顶部添加文本:

示例

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>
亲自试一试 »

你可知道?

W3.CSS是 Bootstrap 5 的绝佳替代品。

W3.CSS更小、更快、更容易使用。

如果您想学习 W3.CSS,请访问我们的W3.CSS教程