Bootstrap 5 卡片

卡片

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

image

John Doe

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

See Profile

基础卡片

我们可以通过 Bootstrap5 的 .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.

实例

基本卡

主要卡片

成功卡片

信息卡片

警示卡片

危险卡片

次要卡片

暗色卡片

浅色卡片
亲自试一试 »


标题、文本和链接

卡片标题

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

卡片链接 另一个链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

实例

<div class="card">
  <div class="card-body">
    <h4 class="card-title">卡片标题</h4>
    <p class="card-text">一些示例文本。 一些示例文本。</p>
    <a href="#" class="card-link">卡片链接</a>
    <a href="#" class="card-link">另一个链接</a>
  </div>
</div>
亲自试一试 »

图片卡片

Card image

John Doe

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

See Profile

Jane Doe

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

See Profile
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">一些示例文本。</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>
亲自试一试 »

卡片图像背景

Card image

John Doe

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

See Profile

如果图像要设置为背景,可以使用 .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">一些示例文本。</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>
亲自试一试 »