Bootstrap 面板

Bootstrap 卡片（原面板）

卡片

在 Bootstrap 5 中，面板（Panels）已被卡片（Cards）取代。卡片是一种灵活且可扩展的内容容器（Content container）。它包含用于头部（Headers）、底部（Footers）、内容、颜色等的选项（Options）。它们使用 Flexbox 构建，提供了简单的对齐（Alignment）和尺寸控制（Sizing）。

一个基本卡片

卡片是使用 .card 类创建的，卡片内部的内容通常使用 .card-body 类：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Card Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

卡片还可以包含图像（Images）、列表（Lists）及其他元素（Elements）。默认情况下，卡片没有固定宽度（Fixed width），因此它们会自然填充其父容器的整个宽度（Full width）。你可以使用自定义 CSS（Custom CSS）、网格类（Grid classes）或实用工具（Utilities）来限制它们的宽度。

卡片头部

.card-header 类会为卡片添加一个头部区域：

<div class="card">
  <div class="card-header">
    Featured Header
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

卡片底部

.card-footer 类会为卡片添加一个底部区域：

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

卡片组

要将多个卡片以相等的宽度和高度组合在一行中，请将它们包裹在一个带有 .card-group 类的 <div> 中。卡片组使用 display: flex; 来实现它们统一的尺寸（Uniform sizing）。

注意：使用卡片组时，卡片底部会自动对齐。

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

对于像卡片堆（Decks）或砌体式（Masonry-style）列的卡片布局，请参阅官方文档中的 Bootstrap 网格卡片（Grid cards）或砌体式示例。

带有背景和边框的卡片

为卡片添加颜色，你可以使用 Bootstrap 的背景颜色实用工具类（例如，.bg-primary、.bg-success）和文本颜色实用工具（例如，.text-white）。你还可以使用边框颜色实用工具（例如，.border-primary）。

带有背景颜色的卡片示例：

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<!-- Add more examples for .text-bg-danger, .text-bg-warning, .text-bg-info, .text-bg-light, .text-bg-dark -->

带有边框颜色的卡片示例：

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary border card</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success border card</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
</div>
<!-- Add more examples for .border-danger, .border-warning, etc. -->

有关卡片的完整指南，包括图像叠加（Image overlays）、水平布局（Horizontal layouts）等，请访问 Bootstrap 5 官方卡片文档。