Cards卡

~~Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.~~Bootstrap的卡提供了一个灵活和可扩展的内容容器，具有多种变体和选项。

~~On this page~~本页内容

About关于

~~A card is a flexible and extensible content container.~~ 卡片是一种灵活且可扩展的内容容器。~~It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.~~ 它包括页眉和页脚选项、各种内容、上下文背景颜色和强大的显示选项。~~If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails.~~ 如果您熟悉Bootstrap3，卡将取代我们的旧面板、孔和缩略图。~~Similar functionality to those components is available as modifier classes for cards.~~这些组件的类似功能可用作卡的修改器类。

Example例子

~~Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.~~ 卡片尽可能少地使用标记和样式构建，但仍然能够提供大量的控制和定制。~~Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.~~ 使用flexbox构建，它们易于对齐，并与其他Bootstrap组件很好地混合。~~They have no margin by default, so use spacing utilities as needed.~~默认情况下，它们没有margin，因此根据需要使用间距实用程序。

~~Below is an example of a basic card with mixed content and a fixed width.~~ 下面是一个混合内容和固定宽度的基本卡片示例。~~Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.~~ 卡片开始时没有固定的宽度，因此它们自然会填充其父元素的整个宽度。~~This is easily customized with our various sizing options.~~这很容易利用我们的各种尺寸选项来定制。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>

Content types内容类型

~~Cards support a wide variety of content, including images, text, list groups, links, and more.~~ 卡片支持多种内容，包括图像、文本、列表组、链接等。~~Below are examples of what’s supported.~~下面是支持的示例。

Body主体

~~The building block of a card is the .card-body.~~ 卡片的构造块是.card-body。~~Use it whenever you need a padded section within a card.~~只要你需要卡片中的填充部分，就可以使用它。

This is some text within a card body.

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

Titles, text, and links标题、文本和链接

~~Card titles are used by adding .card-title to a <h*> tag.~~ 通过将.card-title添加到<h*>标签来使用卡片标题。~~In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.~~同样，通过将.card-link添加到<a>标签。

~~Subtitles are used by adding a .card-subtitle to a <h*> tag.~~ 通过将.card-subtitle添加到<h*>标签来使用副标题。~~If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.~~如果.card-title项和.card-subtitle项都放在.card-body项中，则卡片标题和副标题会很好地对齐。

Card title

Card subtitle

~~Some quick example text to build on the card title and make up the bulk of the card's content.~~一些快速的示例文本构建在卡片标题上，并构成卡片内容的大部分。

Card link Another link

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>

Images图像

~~.card-img-top places an image to the top of the card.~~ .card-img-top将图像放置在卡的顶部。~~With .card-text, text can be added to the card.~~ 使用.card-text，可以将文本添加到卡片中。~~Text within .card-text can also be styled with the standard HTML tags.~~.card-text中的文本也可以使用标准HTML标记设置样式。

~~Some quick example text to build on the card title and make up the bulk of the card's content.~~一些快速的示例文本构建在卡片标题上，并构成卡片内容的大部分。

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<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>

List groups列表组

~~Create lists of content in a card with a flush list group.~~在具有刷新列表组的卡中创建内容列表。

An item
A second item
A third item

<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>

Featured

An item
A second item
A third item

<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>

An item
A second item
A third item

Card footer

<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>

Kitchen sink厨房水槽

~~Mix and match multiple content types to create the card you need, or throw everything in there.~~ 混合和匹配多种内容类型以创建所需的卡片，或者将所有内容都放在其中。~~Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.~~下面显示的是图像样式、块、文本样式和列表组，它们都包装在固定宽度的卡片中。

Card title卡片标题

~~Some quick example text to build on the card title and make up the bulk of the card's content.~~一些快速的示例文本构建在卡片标题上，并构成卡片内容的大部分。

An item
A second item
A third item

Card link Another link

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

Header and footer页头和页脚

~~Add an optional header and/or footer within a card.~~在卡片中添加可选的页眉和/或页脚。

Featured

Special title treatment特殊头衔待遇

~~With supporting text below as a natural lead-in to additional content.~~以下面的支持文本作为附加内容的自然引入。

Go somewhere

<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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 headers can be styled by adding .card-header to <h*> elements.~~可以通过将.card-header添加到<h*>元素来样式化卡片头。

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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>

Quote

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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>

Sizing尺寸

~~Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.~~ 卡片开始时没有特定的width，所以除非另有说明，否则它们将是100%宽。~~You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.~~您可以根据需要使用自定义CSS、网格类、网格Sass混合项或实用程序来更改这一点。

Using grid markup使用网格标记

~~Using the grid, wrap cards in columns and rows as needed.~~使用网格，根据需要将卡片包装成列和行。

Special title treatment特殊标题待遇

~~With supporting text below as a natural lead-in to additional content.~~以下面的支持文本作为附加内容的自然引入。

Go somewhere

Special title treatment特殊标题待遇

~~With supporting text below as a natural lead-in to additional content.~~以下面的支持文本作为附加内容的自然引入。

Go somewhere

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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">
<h5 class="card-title">Special title treatment</h5>
<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>

Using utilities使用实用程序

~~Use our handful of available sizing utilities to quickly set a card’s width.~~使用我们为数不多的可用大小调整工具快速设置卡片的宽度。

Card title

With supporting text below as a natural lead-in to additional content.

Button

Card title

With supporting text below as a natural lead-in to additional content.

Button

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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">
<h5 class="card-title">Card title</h5>
<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>

Using custom CSS使用自定义CSS

~~Use custom CSS in your stylesheets or as inline styles to set a width.~~在样式表中使用自定义CSS或作为内联样式来设置宽度。

Special title treatment特殊标题待遇

~~With supporting text below as a natural lead-in to additional content.~~以下面的支持文本作为附加内容的自然引入。

Go somewhere

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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>

Text alignment文本对齐

~~You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.~~您可以使用我们的文本对齐类快速更改任何卡片的整体或特定部分的文本对齐方式。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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>

~~Add some navigation to a card’s header (or block) with Bootstrap’s nav components.~~使用Bootstrap的导航组件向卡头（或块）添加一些导航。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<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" aria-current="true" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<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>

Images图像

~~Cards include a few options for working with images.~~ 卡片包括一些用于处理图像的选项。~~Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.~~可以选择在卡的两端附加“图像封顶”，将图像与卡内容叠加，或者简单地将图像嵌入卡中。

Image caps图像封顶

~~Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.~~与页眉和页脚类似，卡片可以包括顶部和底部的“图像封顶”——卡片顶部或底部的图像。

Card title卡片标题

~~This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.~~这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长。

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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">
<h5 class="card-title">Card title</h5>
<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 src="..." class="card-img-bottom" alt="...">
</div>

Image overlays图像覆盖

~~Turn an image into a card background and overlay your card’s text.~~ 将图像转换为卡片背景并覆盖卡片文本。~~Depending on the image, you may or may not need additional styles or utilities.~~根据图像的不同，您可能需要也可能不需要其他样式或实用程序。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<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>

~~Note that content should not be larger than the height of the image.~~ 请注意，内容不应大于图像的高度。~~If content is larger than the image the content will be displayed outside the image.~~如果内容大于图像，则内容将显示在图像外部。

Horizontal水平的

~~Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.~~ 使用网格和实用程序类的组合，卡可以以移动友好且响应迅速的方式水平放置。~~In the example below, we remove the grid gutters with .g-0 and use .col-md-* classes to make the card horizontal at the md breakpoint.~~ 在下面的示例中，我们使用.g-0删除网格槽，并使用.col-md-*类使卡在md断点处保持水平。~~Further adjustments may be needed depending on your card content.~~根据您的卡内容，可能需要进一步调整。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>

Card styles卡片样式

~~Cards include various options for customizing their backgrounds, borders, and color.~~卡片包括用于自定义其背景、边框和颜色的各种选项。

Background and color背景和颜色

~~Use text color and background utilities to change the appearance of a card.~~使用文本颜色和背景实用程序更改卡的外观。

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<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-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<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-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<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-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<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>

Conveying meaning to assistive technologies向辅助技术传达意义

~~Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.~~ 使用颜色来增加意义只能提供视觉指示，而不会传达给屏幕阅读器等辅助技术的用户。Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.确保由颜色表示的信息在内容本身（例如可见文本）中是明显的，或者通过其他方式包括，例如使用.visually-hidden类隐藏的其他文本。

Border边框

~~Use border utilities to change just the border-color of a card.~~ 使用边框实用程序仅更改卡的边框颜色。~~Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.~~请注意，您可以将.text-{color}类放在父.card或卡片内容的子集上，如下所示。

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<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: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<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 utilities混合实用程序

~~You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.~~您还可以根据需要更改卡片页眉和页脚上的边框，甚至可以使用.bg-transparent删除其background-color。

Header

Success card title

~~Some quick example text to build on the card title and make up the bulk of the card's content.~~一些快速的示例文本构建在卡片标题上，并构成卡片内容的大部分。

Footer

<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<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>

Card layout卡片布局

~~In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.~~ 除了对卡片中的内容进行样式化之外，Bootstrap还包括一些用于排列一系列卡片的选项。~~For the time being, these layout options are not yet responsive.~~目前，这些布局选项尚未响应。

Card groups卡片组

~~Use card groups to render cards as a single, attached element with equal width and height columns.~~ 使用卡组将卡渲染为具有相同宽度和高度列的单个附着元素。~~Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.~~卡片组开始堆叠并使用display: flex;；从sm断点开始以一致性的尺寸附着。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>

~~When using card groups with footers, their content will automatically line up.~~使用带页脚的卡片组时，其内容将自动对齐。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>

Grid cards网格卡

~~Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row.~~ 使用Bootstrap网格系统及其.row-cols类来控制每行显示多少网格列（缠绕在卡周围）。~~For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.~~例如，下面是.row-cols-1在一列上布置卡片，以及.row-cols-md-2在多行上从中间断点开始将四张卡片等宽分割。

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>

~~Change it to .row-cols-3 and you’ll see the fourth card wrap.~~将其更改为.row-cols-3，您将看到第四个卡片包装。

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>

~~When you need equal height, add .h-100 to the cards.~~ 当你需要等高时，在卡片上加上.h-100。~~If you want equal heights by default, you can set $card-height: 100% in Sass.~~如果默认情况下希望高度相等，可以在Sass中设置$card-height: 100%。

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a short card.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
</div>

~~Just like with card groups, card footers will automatically line up.~~与卡片组一样，卡片页脚将自动对齐。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>

Masonry

~~In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects.~~ 在v4中，我们使用了一种仅限于CSS的技术来模拟Masonry的行为，但这种技术带来了许多令人不快的副作用。~~If you want to have this type of layout in v5, you can just make use of Masonry plugin.~~ 如果您想在v5中拥有这种类型的布局，您可以只使用Mashise插件。Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.Masonry不包括在Bootstrap中，但我们制作了一个演示示例来帮助您入门。

Sass

Variables变量

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Cards卡

About关于

Example例子

Card title

Content types内容类型

Body主体

Titles, text, and links标题、文本和链接

Card title

Card subtitle

Images图像

List groups列表组

Kitchen sink厨房水槽

Card title卡片标题

Header and footer页头和页脚

Special title treatment特殊头衔待遇

Featured

Special title treatment

Special title treatment

Sizing尺寸

Using grid markup使用网格标记

Special title treatment特殊标题待遇

Special title treatment特殊标题待遇

Using utilities使用实用程序

Card title

Card title

Using custom CSS使用自定义CSS

Special title treatment特殊标题待遇

Text alignment文本对齐

Special title treatment

Special title treatment

Special title treatment

Navigation航行

Special title treatment

Special title treatment

Images图像

Image caps图像封顶

Card title卡片标题

Card title

Image overlays图像覆盖

Card title

Horizontal水平的

Card title

Card styles卡片样式

Background and color背景和颜色

Primary card title

Secondary card title

Success card title

Danger card title

Warning card title

Info card title

Light card title

Dark card title

Conveying meaning to assistive technologies向辅助技术传达意义

Border边框

Primary card title

Secondary card title

Success card title

Danger card title

Warning card title

Info card title

Light card title

Dark card title

Mixins utilities混合实用程序

Success card title

Card layout卡片布局

Card groups卡片组

Card title

Card title

Card title

Card title

Card title

Card title

Grid cards网格卡

Card title

Card title

Card title

Card title

Card title

Card title

Card title