Bootstrap 简明教程

Bootstrap - Card

本章将讨论 Bootstrap 卡片。Bootstrap 卡片提供了灵活且可扩展的内容容器，具有多种风格和选项。卡片是一个内容的灵活和可扩展的容器。它包括标题栏和页脚选项、不同的内容、背景色以及显示选项。

Basic card

  1. 要创建一个基本卡片使用类 .card 。必要时使用 spacing utilities 因为卡片没有边距。

  2. 带有混合内容和固定宽度的基本卡片在此演示。由于没有固定宽度，卡片自然会覆盖其父元素的整个宽度。通过多种尺寸选择，可以轻松进行自定义。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!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

卡片支持各种类型的内容，包括图像、文本、列表组和链接。下面是支持的示例。

Body

每当您需要卡片中内填充部分时添加类 .card-body 。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!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

  1. 通过向 &lt;h >* 标记添加类 .card-title 来使用卡片标题。同样，可以通过向 &lt;a&gt; 标记添加 .card-link 来添加并平铺链接。

  2. 在 .card-body 元素中放置 .card-title 和 .card-subtitle 元素确保卡片标题和副标题很好地对齐。通过向 &lt;h >* 标记添加 .card-subtitle 来使用副标题。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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

  1. 类 .card-img-top 将图像放置在卡片上方。

  2. 您可以使用 .card-text 向卡片添加文本。 .card-text 中的文本也可以使用标准 HTML 标记进行样式化。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!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 。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!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 来向列表组添加标题。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!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 中。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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

结合多种内容类型来创建所需的卡片，或全部填充。下面是图像风格、块、文本风格和列表组，全部分组到固定宽度的卡片中。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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

在卡片中包含一个可选的页眉和/或页脚。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 >* 元素来设置卡片标题的样式。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!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 中。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!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 将整个卡片的文本居中对齐。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 或实用程序自定义此项。

Using grid markup

使用网格根据需要将卡片换行为列和行。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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. 快速设置卡片宽度。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 来设置宽度。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 允许您快速更改整个卡片或特定部分的文本对齐方式。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 向卡片的页眉（或块）中添加导航。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 导航组件。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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

卡片包含多种用于处理图像的选项。选择在卡片的每一侧都有“图像标题”，在卡片的内容上叠加图像，或者简单地将图像嵌入到卡片中。

Image caps

卡片可以在顶部和底部有“图像标题”（图像在卡片的顶部或底部），类似于下面演示的标题和页脚。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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

将图像变成卡片背景并叠加卡片文本。某些图像可能需要额外的样式或实用程序。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 断点处平整卡片。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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

卡片提供了广泛的背景、边框和颜色自定义选项。

Background and color

  1. 使用 .text-bg-{color} 帮助程序，您可以使用对比鲜明的背景色设置背景色。

  2. 先前手动配对 .text-color 和 .bg-color 实用工具是必不可少的造型工具，如果你愿意你依然可以这样做。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 或卡片内容的子级，如下所示。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 去除背景颜色。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 还提供了用于按顺序排列卡片的多个选项。当前，这些布局选项无响应能力。以下部分对此进行了展示。

Card groups

卡片组将卡片呈现为单个附加元素，其中包含宽度和高度相同的列。卡片组呈堆叠排列。它们使用 display: flex; 在 sm 断点开始参与加入并实现统一的尺寸。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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>

使用带有页脚的卡片组，可以自动排列其内容。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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

  1. 使用 Bootstrap grid 系统及其 .row-cols 类控制每行显示的网格列（围绕卡片进行换行）的数量。

  2. 例如，以下是 .row-cols-1 ，用于将卡片放入列中，以及 .row-cols-md-2 ，用于从中间断点向上将 4 张具有相同宽度的卡片分布在多行中。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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 张卡片断开。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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% 。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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>

与卡片组一样，卡片页脚会自动排列。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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>