Bootstrap-卡

本章将讨论 Bootstrap 卡。Bootstrap 卡提供了灵活且可扩展的内容容器，具有多种风格和选项。卡片是一种灵活且可扩展的内容容器。它包括页眉和页脚选项、不同的内容、上下文背景颜色和有效的显示选项。

基本卡

  • 要创建基本卡片，请使用.card类。需要时使用间距实用程序，因为卡片没有边距。

  • 这里演示了具有混合内容和固定宽度的基本卡片。卡片自然地覆盖其父元素的整个宽度，因为它们没有固定的宽度。有多种尺寸选择，可以轻松定制。

例子

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

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

内容类型

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

身体

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

例子

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

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

标题、文本和链接

  • 通过将.card-title类添加到<h*>标记来使用卡片标题。您可以通过将.card-link添加到<a>标记来类似地添加和平铺链接。

  • 将.card-title和.card-subtitle元素放置在.card-body元素中可确保卡片标题和副标题良好对齐。通过将.card-subtitle添加到<h*>标记来使用字幕。

例子

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

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

图片

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

  • 您可以使用.card-text将文本添加到卡片中。.card-text中的文本也可以使用标准 HTML 标签进行样式设置。

例子

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

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

例子

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

    <!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 将标头添加到卡片列表组中。

例子

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

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

使用刷新列表组在卡片上创建页脚内容列表。通过添加类.card- footer 将页脚添加到卡片列表组中。

例子

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

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

厨房水槽

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

例子

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

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

页眉和页脚

在卡片内包含可选的页眉和/或页脚。

例子

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

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

例子

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

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

要突出显示，请将类.blockquote mb-0添加到.blockquote。

例子

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

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

将整个卡片的文本与.text-center类的中心对齐。

例子

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

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

浆纱

除非另有说明，卡片宽度为 100%。这可以使用自定义 CSS、网格类、网格 sass mixin 或实用程序进行自定义。

使用网格标记

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

例子

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

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

使用实用程序

使用一些可用的调整大小实用程序快速设置卡片的宽度。

例子

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

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

使用自定义 CSS

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

例子

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

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

文本对齐

文本对齐类允许您快速更改整个卡片或特定部分的文本对齐方式。

例子

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

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

导航

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

例子

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

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

通过添加类.nav-pills来获取 Bootstrap 导航组件。

例子

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

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

图片

卡片包含多个用于处理图像的选项。选择在卡片的每一面都有“图像帽”，将图像覆盖在卡片的内容上，或者只是将图像嵌入到卡片中。

图像上限

卡片的顶部和底部可以有“图像上限”（图像位于卡片的顶部或底部），类似于页眉和页脚，如下所示。

例子

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

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

图像叠加

将图像转换为卡片背景并覆盖卡片文本。某些图像可能需要额外的样式或实用程序。

例子

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

  <!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>
注意：请务必注意，文本/内容不应超过图像的高度，因为这将导致其显示在框架之外。

水平的

通过使用网格和实用程序类的组合，您可以以适合移动设备且响应式的方式水平创建卡片。在下面的示例中，.g-0删除网格条并使用.col-md-*类在md断点处对卡进行调平。

例子

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

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

卡片样式

卡片有多种背景、边框和颜色自定义选项。

背景和颜色

v5.2.0中添加

  • 使用.text-bg-{color}帮助程序，您可以设置具有对比前景色的背景色。

  • 以前，样式需要手动配对.text-color和.bg-color实用程序，如果您愿意，您仍然可以这样做。

例子

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

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

边界

通过使用边框实用程序，您可以更改卡片边框颜色。请注意，.text-{color}类可以放置在父.card或卡片内容的子集上，如下所示。

例子

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

  <!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 实用程序

如果您愿意，您还可以更改卡页眉和页脚边框，并使用.bg-transparent删除背景颜色。

例子

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

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

卡片布局

除了设计和自定义卡片中的内容之外，Bootstrap 还提供了多种用于串联排列卡片的选项。目前，这些布局选项不响应。以下部分演示了这一点。

卡组

卡片组将卡片渲染为具有相同宽度和高度的列的单个附加元素。卡组堆叠在一起。他们使用display: flex; 从sm断点开始以统一的尺寸连接。

例子

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

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

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

例子

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

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

网格卡

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

  • 例如，这里的.row-cols-1将卡片按列放置，.row-cols-md-2将 4 张相同宽度的卡片从中间断点向上分布在多行上。

例子

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

  <!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，您将看到第四张卡中断。

例子

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

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

例子

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

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

与卡片组一样，卡片页脚也是自动排列的。

例子

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

  <!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="c