Bootstrap 简明教程
Bootstrap - Card
本章将讨论 Bootstrap 卡片。Bootstrap 卡片提供了灵活且可扩展的内容容器，具有多种风格和选项。卡片是一个内容的灵活和可扩展的容器。它包括标题栏和页脚选项、不同的内容、背景色以及显示选项。
This chapter will discuss about Bootstrap cards. Bootstrap cards provide flexible and extensible content containers with many flavors and options. A card is a flexible and extensible container for content. It includes header and footer options, different content, contextual background colors, and effective display options.
Basic card
-
To create a basic card use the class .card. Use spacing utilities when required because cards don’t come with margins.
-
The basic card with mixed content and a fixed width is demonstrated here. Cards naturally cover the entire width of their parent element since they have no fixed width. With many sizing choices, this is easily customizable.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 15rem;">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="btn btn-primary">Get More information</a>
</div>
</div>
</body>
</html>Content types
卡片支持各种类型的内容，包括图像、文本、列表组和链接。下面是支持的示例。
Cards support a various type of content including images, text, list groups, and links. Below are examples of what’s supported.
Body
每当您需要卡片中内填充部分时添加类 .card-body 。
Add the class .card-body whenever you require a padded section within a card.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
Card body section.
</div>
</div>
</body>
</html>Titles, text, and links
-
Use the card title by adding the class .card-title to the <h>* tag. You can similarly add and tile links by adding .card-link to the <a> tag.
-
Placing the .card-title and .card-subtitle elements in the .card-body element ensures that the card title and subtitle line up nicely. Subtitles are used by adding .card-subtitle to the <h>* tag.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Mr. Jhon</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">HR</h6>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="card-link">More info</a>
</div>
</div>
</body>
</html>Images
-
The class .card-img-top places the image above the card.
-
You can add text to the card using .card-text. The text within .card-text can also be styled using standard HTML tags.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</body>
</html>List groups
使用齐平列表组来在卡片上创建内容列表。添加类 .list-group-flush 。
Use flush list groups to create content lists on cards. Add the class .list-group-flush.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</body>
</html>使用齐平列表组来在卡片上创建标题内容列表。通过向卡片的列表组添加类 .card-header 来向列表组添加标题。
Use flush list groups to create header content lists on cards. Add the header to the list group of card by adding the class .card-header.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</body>
</html>使用 flush list groups 在卡片上创建页脚内容列表。通过添加 class .card-footer 将页脚添加到卡片的 list group 中。
Use flush list groups to create footer content lists on cards. Add the footer to the list group of card by adding the class .card-footer.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
<div class="card-footer">
Card Footer
</div>
</div>
</body>
</html>Kitchen sink
结合多种内容类型来创建所需的卡片，或全部填充。下面是图像风格、块、文本风格和列表组，全部分组到固定宽度的卡片中。
Combine multiple content types to create the card you want, or populate it all. Below are image styles, blocks, text styles, and list groups, all grouped into fixed-width card.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
</div>
</body>
</html>Header and footer
在卡片中包含一个可选的页眉和/或页脚。
Include an optional header and/or footer inside a card.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
<div class="card-footer">
Card Footer
</div>
</div>
</body>
</html>您可以通过将 .card-header 添加到 <h >* 元素来设置卡片标题的样式。
You can style the card header by adding .card-header to the <h>* element.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<h5 class="card-header">Card Header</h5>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
</body>
</html>若要高亮显示，请将 class .blockquote mb-0 添加到 .blockquote 中。
To highlight, add the class .blockquote mb-0 to the .blockquote.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>blockquote element</p>
<footer class="blockquote-footer">Blockquote footer <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</body>
</html>使用 class .text-center 将整个卡片的文本居中对齐。
Align the text of whole card at the center with the class .text-center.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card text-center">
<div class="card-header">
Rose
</div>
<div class="card-body">
<h5 class="card-title">A rose is a flower that people in love give each other.</h5>
<p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
<a href="#" class="btn btn-primary">More info</a>
</div>
</div>
</body>
</html>Sizing
除非另有说明，否则卡片宽度为 100%。可以使用自定义 CSS、网格类、网格 sass mixin 或实用程序自定义此项。
Card width is 100% unless otherwise stated. This can be customized using custom CSS, grid classes, grid sass mixins, or utilities.
Using grid markup
使用网格根据需要将卡片换行为列和行。
Use a grid to wrap your cards into columns and rows as required.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
</div>
</div>
</body>
</html>Using utilities
使用一些可用的调整大小 utilities. 快速设置卡片宽度。
Quickly set the width of your card using some of the available resizing utilities.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card w-75 mb-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content..</p>
<a href="#" class="btn btn-primary">Card Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="btn btn-primary">Card Button</a>
</div>
</div>
</body>
</html>Using custom CSS
在您的样式表中或作为内联样式使用自定义 CSS 来设置宽度。
Use custom CSS in your style sheet or as an inline style to set the width.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
</body>
</html>Text alignment
Text Alignment classes 允许您快速更改整个卡片或特定部分的文本对齐方式。
Text Alignment classes allow you to quickly change the text alignment of the entire card or specific parts.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card mb-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">The text alignment of the card at the left.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
<div class="card text-center mb-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">The text alignment of the card at the center.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">The text alignment of the card at the right.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
</body>
</html>Navigation
使用 Bootstrap navigation components 向卡片的页眉（或块）中添加导航。
Add navigation to the header (or block) of your card using Bootstrap navigation components.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">About us</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Rose</h5>
<p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
</body>
</html>通过添加 class .nav-pills 获取 Bootstrap 导航组件。
Get the Bootstrap navigation components by adding the class .nav-pills.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<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="#" >Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">About us</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Rose</h5>
<p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p>
<a href="#" class="btn btn-primary">Get more info</a>
</div>
</div>
</body>
</html>Images
卡片包含多种用于处理图像的选项。选择在卡片的每一侧都有“图像标题”，在卡片的内容上叠加图像，或者简单地将图像嵌入到卡片中。
Cards contain several options for working with images. Choose to have "image caps" on each side of the card, overlay the image on the card’s contents, or simply embed the image into the card.
Image caps
卡片可以在顶部和底部有“图像标题”（图像在卡片的顶部或底部），类似于下面演示的标题和页脚。
Cards can have "image caps" at top and bottom (images at the top or bottom of the card), similar to headers and footers as demonstrated below.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card mb-3">
<img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<p class="card-text"><small class="text-body-secondary">2 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<p class="card-text"><small class="text-body-secondary">5 mins ago</small></p>
</div>
<img src="\bootstrap\images\tutimg2.jpg" class="card-img-bottom" alt="...">
</div>
</body>
</html>Images overlays
将图像变成卡片背景并叠加卡片文本。某些图像可能需要额外的样式或实用程序。
Turn an image into a card background and overlay the card text. Some images may require additional styling or utility.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card text-bg-dark">
<img src="\bootstrap\images\tutimg2.jpg" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<p class="card-text"><small>2 mins ago</small></p>
</div>
</div>
</body>
</html>Horizontal
通过结合使用网格和实用程序类，您可以以移动友好且响应的方式水平创建卡片。在下面的示例中， .g-0 移除了网格栏并使用 .col-md- * 类在 md 断点处平整卡片。
By using a combination of grid and utility classes, you can create cards horizontally in a mobile-friendly and responsive way. In the example below, .g-0 removes the grid bars and uses the .col-md-* classes to level the card at the md breakpoints.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="\bootstrap\images\tutimg.png" 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">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<p class="card-text"><small class="text-body-secondary">1 mins ago</small></p>
</div>
</div>
</div>
</div>
</body>
</html>Card styles
卡片提供了广泛的背景、边框和颜色自定义选项。
A wide range of background, border, and color customization choices are available for cards.
Background and color
-
Using .text-bg-{color} helpers, you can set a background color with a contrasting foreground color.
-
Previously, pairing .text-color and .bg-color utilities manually was necessary for styling, you can still do so if you prefer.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Primary</div>
<div class="card-body">
<p class="card-text">A card with primary background-color.</p>
</div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Secondary</div>
<div class="card-body">
<p class="card-text">A card with secondary background-color.</p>
</div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Success</div>
<div class="card-body">
<p class="card-text">A card with success background-color.</p>
</div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Danger</div>
<div class="card-body">
<p class="card-text">A card with danger background-color.</p>
</div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Warning</div>
<div class="card-body">
<p class="card-text">A card with warning background-color.</p>
</div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Info</div>
<div class="card-body">
<p class="card-text">A card with info background-color.</p>
</div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">light</div>
<div class="card-body">
<p class="card-text">A card with light background-color.</p>
</div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Dark</div>
<div class="card-body">
<p class="card-text">A card with dark background-color.</p>
</div>
</div>
</body>
</html>Border
使用 border utilities 可以更改卡片 border-color 。请注意， .text-{color} 类可以放在上级 .card 或卡片内容的子级，如下所示。
By using the border utilities you can change the card border-color. Note that the .text-{color} class can be placed on the parent .card or a subset of the card’s content as shown below.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Primary</div>
<div class="card-body text-primary">
<p class="card-text">A card with primary border-color.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Dark</div>
<div class="card-body">
<p class="card-text">A card with dark border-color.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Secondary</div>
<div class="card-body text-secondary">
<p class="card-text">A card with secondary border-color.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Light</div>
<div class="card-body">
<p class="card-text">A card with light border-color.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Danger</div>
<div class="card-body text-danger">
<p class="card-text">A card with light border-color.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Warning</div>
<div class="card-body">
<p class="card-text">A card with warning border-color.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Success</div>
<div class="card-body text-success">
<p class="card-text">A card with success border-color.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Info</div>
<div class="card-body">
<p class="card-text">A card with info border-color.</p>
</div>
</div>
</body>
</html>Mixins utilities
您也可以更改卡片标题和页脚边框，并按您喜好使用 .bg-transparent 去除背景颜色。
You can also change the card header and footer borders and remove the background color with .bg-transparent if you like.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Card Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<div class="card-footer bg-transparent border-info">Card Footer</div>
</div>
</body>
</html>Card layout
除了造型和定制卡片中的内容之外，Bootstrap 还提供了用于按顺序排列卡片的多个选项。当前，这些布局选项无响应能力。以下部分对此进行了展示。
In addition to styling and customising the content in your card, Bootstrap provides several options for arranging card in series. Currently, these layout options are not responsive. Following sections demonstrates this.
Card groups
卡片组将卡片呈现为单个附加元素，其中包含宽度和高度相同的列。卡片组呈堆叠排列。它们使用 display: flex; 在 sm 断点开始参与加入并实现统一的尺寸。
Card groups render cards as a single attached element with columns of the same width and height. Card groups are stacked. They use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card-group">
<div class="card">
<img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<p class="card-text"><small class="text-body-secondary">1 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<p class="card-text"><small class="text-body-secondary">2 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
<p class="card-text"><small class="text-body-secondary">3 mins ago</small></p>
</div>
</div>
</div>
</body>
</html>使用带有页脚的卡片组，可以自动排列其内容。
Use a card group with a footer, its content is automatically arranged.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card-group">
<div class="card">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">1 mins ago</small>
</div>
</div>
<div class="card">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">2 mins ago</small>
</div>
</div>
<div class="card">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">3 mins ago</small>
</div>
</div>
</div>
</body>
</html>Grid cards
-
Use the Bootstrap grid system and its .row-cols class to control the number of grid columns (wrapped around the cards) to display per row.
-
For example, here’s .row-cols-1 to put cards in columns and .row-cols-md-2 to spread 4 cards of the same width across multiple rows from the middle breakpoint upwards.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="\bootstrap\images\tutimg.png" 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="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
</div>
</body>
</html>如果您将其更改为 .row-cols-3 ，您会看到第 4 张卡片断开。
If you change it to .row-cols-3 you will see the 4th card break.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row row-cols-1 row-cols-sm-3 g-5">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
</div>
</body>
</html>当您希望拥有相同时，请向卡片中添加 .h-100 。默认情况下，您需要拥有相同的高度，可以在 Sass 中设置 $card-height: 100% 。
When you want the same height to add .h-100 to the card. You want the same height by default, you can set $card-height: 100% in Sass.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row row-cols-1 row-cols-sm-3 g-5">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
</div>
</div>
</div>
</body>
</html>与卡片组一样，卡片页脚会自动排列。
Like card groups, card footers are automatically arranged.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Card</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row row-cols-1 row-cols-sm-3 g-4">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">1 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">2 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">3 mins ago</small>
</div>
</div>
</div>
</div>
</body>
</html>