Bootstrap 4 中文开发手册 Cards（卡）

Bootstrap 的卡片提供了一个灵活且可扩展的内容容器，包含多种变体和选项。

关于

一个卡片是一个灵活的，可扩展的内容容器。它包括页眉和页脚的选项，各种内容，上下文背景颜色以及强大的显示选项。

如果您熟悉 Bootstrap 3，卡片可以替换我们的旧面板、水井和缩略图。与这些组件类似的功能可作为卡片的修饰符类使用。

示例

卡片尽可能少的标记和样式，但仍然设法提供大量的控制和定制。使用 flexbox 构建，它们可以轻松对齐并与其他 Bootstrap 组件良好混合。

以下是具有混合内容和固定宽度的基本卡片的示例。卡片没有固定的宽度开始，所以它们自然会填充其父元素的整个宽度。这很容易通过我们的各种尺寸选项进行定制。

<div class="card" style="width: 20rem;">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

内容类型

卡片支持各种内容，包括图像，文本，列表组，链接等。以下是支持的例子。

构成

卡片的构建块是.card-body。只要你需要卡内的填充部分，就使用它。

<div class="card">  <div class="card-body">
    This is some text within a card body.  </div></div>

标题，文本和链接

卡片标题通过添加.card-title到<h*>标签来使用。以同样的方式，链接被添加并通过添加.card-link到<a>标签而彼此相邻放置。

字幕是通过将添加.card-subtitle到<h*>标签。如果项目.card-title和.card-subtitle项目被放置在一个.card-body项目中，则卡片标题和副标题很好地对齐。

<div class="card" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    <a href="#" class="card-link">Card link</a>    <a href="#" class="card-link">Another link</a>  </div></div>

图片

.card-img-top将图像放置在卡的顶部。包含.card-text，文字可以添加到卡。文本内的文字.card-text也可以用标准的 HTML 标签进行样式设计。

<div class="card" style="width: 20rem;">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div>

列出组

使用刷新列表组创建卡片中的内容列表。

<div class="card" style="width: 20rem;">  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul></div>

<div class="card" style="width: 20rem;">  <div class="card-header">
    Featured  </div>  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul></div>

厨房水槽-Kitchen sink

混合并匹配多种内容类型来创建您需要的卡片，或将所有内容都扔到那里。下面显示的是图像样式，块，文本样式和列表组 - 全部用固定宽度卡包装。

<div class="card" style="width: 20rem;">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div>  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul>  <div class="card-body">    <a href="#" class="card-link">Card link</a>    <a href="#" class="card-link">Another link</a>  </div></div>

页眉和页脚

在卡片中添加可选标题和/或页脚。

<div class="card">  <div class="card-header">
    Featured  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

卡头可以通过增加设置样式.card-header到<h*>要素。

<div class="card">  <h4 class="card-header">Featured</h4>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

<div class="card">  <div class="card-header">
    Quote  </div>  <div class="card-body">    <blockquote class="blockquote mb-0">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>    </blockquote>  </div></div>

<div class="card text-center">  <div class="card-header">
    Featured  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div>  <div class="card-footer text-muted">    2 days ago  </div></div>

丈量大小

卡片没有具体width的开始，所以除非另有说明，否则它们将是100％宽。您可以根据需要使用自定义 CSS，网格类，网格 Sass mixins 或实用程序来更改此设置。

使用网格标记

使用网格，根据需要将卡片打包成行和列。

<div class="row">  <div class="col-sm-6">    <div class="card">      <div class="card-body">        <h4 class="card-title">Special title treatment</h4>        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>    </div>  </div>  <div class="col-sm-6">    <div class="card">      <div class="card-body">        <h4 class="card-title">Special title treatment</h4>        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>    </div>  </div></div>

使用实用程序

使用我们的一些可用的尺寸设置工具来快速设置卡的宽度。

<div class="card w-75">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Button</a>  </div></div><div class="card w-50">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Button</a>  </div></div>

使用自定义 CSS

在样式表中使用自定义 CSS 或者使用内联样式来设置宽度。

<div class="card" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

文本对齐

您可以使用我们的文本对齐类快速更改任何卡片的文本对齐——整体或特定部分。

<div class="card" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div><div class="card text-center" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div><div class="card text-right" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

导航

使用 Bootstrap 的导航组件将一些导航添加到卡的标题（或块）。

<div class="card text-center">  <div class="card-header">    <ul class="nav nav-tabs card-header-tabs">      <li class="nav-item">        <a class="nav-link active" href="#">Active</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

<div class="card text-center">  <div class="card-header">    <ul class="nav nav-pills card-header-pills">      <li class="nav-item">        <a class="nav-link active" href="#">Active</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

图片

卡包括一些用于处理图像的选项。选择在卡片的任一端添加“图像大小写”，将图像与卡片内容叠加，或者将图像嵌入到卡片中。

图像上限

与页眉和页脚类似，卡片可以包括顶部和底部的“图像上限” - 图像顶部或底部的图像。

<div class="card mb-3">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>  </div></div><div class="card">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>  </div>  <img class="card-img-bottom" src="..." alt="Card image cap"></div>

图像叠加

将图像转换成卡片背景并覆盖卡片的文字。根据图像，您可能需要也可能不需要其他样式或实用程序。

<div class="card bg-dark text-white">  <img class="card-img" src="..." alt="Card image">  <div class="card-img-overlay">    <h4 class="card-title">Card title</h4>    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    <p class="card-text">Last updated 3 mins ago</p>  </div></div>

卡片样式

卡片包括用于自定义背景，边框和颜色的各种选项。

背景和颜色

使用文本和背景实用程序更改卡的外观。

<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Primary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Secondary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-success mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Success card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-danger mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Danger card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-warning mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Warning card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-info mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Info card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card bg-light mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Light card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-dark mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Dark card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div>

将意义传递给辅助技术
使用颜色来增加意义只能提供一种视觉指示，而不会传达给辅助技术的用户——如屏幕阅读器。确保由颜色表示的信息或者来自内容本身（例如可见文本），或者通过其他方式包含，例如隐藏在.sr-only类中的其他文本。

边境

使用边界实用程序只更改一张卡的border-color。请注意，您可以将.text-{color}类放在父.card卡或卡片内容的子集上，如下所示。

<div class="card border-primary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-primary">    <h4 class="card-title">Primary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-secondary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-secondary">    <h4 class="card-title">Secondary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-success mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-success">    <h4 class="card-title">Success card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-danger mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-danger">    <h4 class="card-title">Danger card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-warning mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-warning">    <h4 class="card-title">Warning card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-info mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-info">    <h4 class="card-title">Info card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-light mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Light card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-dark mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-dark">    <h4 class="card-title">Dark card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div>

Mixins 实用程序

您还可以更改卡上的页眉和页脚所需的边界，甚至用.bg-transparent删除替换其background-color。

<div class="card border-success mb-3" style="max-width: 20rem;">  <div class="card-header bg-transparent border-success">Header</div>  <div class="card-body text-success">    <h4 class="card-title">Success card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div>  <div class="card-footer bg-transparent border-success">Footer</div></div>

卡片布局

除了对卡片中的内容进行造型外，Bootstrap 还包括一些用于布置系列卡片的选项。目前，这些布局选项尚未响应。

卡片组

使用卡片组将卡片渲染为具有相同宽度和高度列的单个附加元素。卡组使用display: flex;来实现统一大小。

<div class="card-group">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div></div>

当使用带有页脚的卡片组时，其内容将自动排列。

<div class="card-group">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div></div>

卡片平台

需要一组相等宽度和高度的卡片，这些卡片不相互连接？使用卡片平台。

<div class="card-deck">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div></div>

就像卡片组一样，卡片组中的卡片脚将自动排队。

<div class="card-deck">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div></div>

卡片列

卡片可以通过将它们包裹进 CSS 中，只用 CSS 来组织成类似 Masonry的列.card-columns。卡片是使用 CSS column属性而不是 Flexbox 构建的，以便于对齐。卡片从上到下和从左到右排列。

抬头！卡列的里程可能会有所不同。为了防止卡片跨栏，我们必须将它们设置display: inline-block为column-break-inside: avoid不是防弹解决方案。

<div class="card-columns">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title that wraps to a new line</h4>      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    </div>  </div>  <div class="card p-3">    <blockquote class="blockquote mb-0 card-body">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>      <footer class="blockquote-footer">        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>        </small>      </footer>    </blockquote>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card bg-primary text-white text-center p-3">    <blockquote class="blockquote mb-0">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>      <footer class="blockquote-footer">        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>        </small>      </footer>    </blockquote>  </div>  <div class="card text-center">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img" src="..." alt="Card image">  </div>  <div class="card p-3 text-right">    <blockquote class="blockquote mb-0">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>      <footer class="blockquote-footer">        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>        </small>      </footer>    </blockquote>  </div>  <div class="card">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div></div>

卡片列也可以扩展和定制一些额外的代码。下面显示的是.card-columns类使用与 CSS 列相同的 CSS 的类的扩展——生成一组用于更改列数的响应层。

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;  }
  @include media-breakpoint-only(xl) {
    column-count: 5;  }}