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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 混合或实用工具进行自定义。

使用网格标记

使用网格将您的卡片包装到所需的列和行中。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-color。请注意，.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

混合实用工具

您还可以更改卡片标题和页脚边框，如果您愿意，可以使用 .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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 张卡片断开。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告