Bootstrap 4 卡片

卡片

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

image

John Doe

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

See Profile

基础卡片

我们可以通过 Bootstrap4 的 .card.card-body 类来创建一个简单的卡片,实例如下:

基础卡片

实例

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

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。


头部和底部

头部
内容

.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>
亲自试一试 »

多种颜色卡片

Bootstrap 4 提供了多种卡片的背景颜色类 (.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">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

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

See Profile

Jane Doe

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

See Profile
Card image

我们可以给 <img> 添加 .card-img-top (图片在文字上方) 或 .card-img-bottom (图片在文字下方 来设置图片卡片:

实例

<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>
亲自试一试 »

拉伸链接

.stretched-link 类添加到卡内的链接中,它将使整个卡可点击和悬停(该卡将充当链接):

Card image

John Doe

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

See Profile

Jane Doe

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

See Profile
Card image

实例

<a href="#" class="btn btn-primary stretched-link">See Profile</a>
亲自试一试 »

卡片图像背景

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">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>
亲自试一试 »

分类分列

第一张卡片内的一些文字

第二张卡片内的一些文字

第三张卡片内的一些文字

第四张卡片内的一些文字

第五张卡片内的一些文字

第六张卡片内的一些文字

.card-columns 类创建了卡片网格(比如 pinterest)。当你插入更多卡片时,布局会自动调整。

注释: 卡片垂直显示在小屏幕上(如果小于576px):

实例

<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">第一张卡片内的一些文字;/p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">第二张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">第三张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">第四张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">第五张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">第六张卡片内的一些文字</p>
    </div>
  </div>
</div>
亲自试一试 »

收货组

第一张卡片内的一些文字

增加一些文字来增加高度

增加一些文字来增加高度

增加一些文字来增加高度

第二张卡片内的一些文字

第三张卡片内的一些文字

第四张卡片内的一些文字

.card-deck 类创建高度和宽度相等的卡片网格。当你插入更多卡片时,布局会自动调整。

注释: 卡片垂直显示在小屏幕上(小于576px):

实例

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">第一张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">第二张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">第三张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">第四张卡片内的一些文字</p>
    </div>
  </div>
</div>
亲自试一试 »

收货组

第一张卡片内的一些文字

增加一些文字来增加高度

增加一些文字来增加高度

增加一些文字来增加高度

第二张卡片内的一些文字

第三张卡片内的一些文字

第四张卡片内的一些文字

.card-group 类似于 .card-deck。唯一的区别是 .card-group 类删除了每张卡之间的左右边距。

注释: 卡片垂直显示在小屏幕上(小于576px),上下边距相同:

实例

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">第一张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">第二张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">第三张卡片内的一些文字</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">第四张卡片内的一些文字</p>
    </div>
  </div>
</div>
亲自试一试 »