Bootstrap 3 卡片示例

简介

Bootstrap 3 卡片组件允许您轻松地创建漂亮的卡片效果，用于呈现内容，如图片、文本和链接。本示例将向您展示如何使用 Bootstrap 3 创建漂亮的卡片效果。

卡片组件

Bootstrap 3 卡片组件通常包含以下内容：

• 卡片头部（可选）
• 卡片内容
• 卡片底部（可选）

以下是使用 Bootstrap 3 卡片组件创建卡片示例的示例代码：

<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">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 class="card-footer">
    Card Footer
  </div>
</div>

卡片头部

卡片头部通常包括卡片标题，可以用以下代码创建：

<div class="card-header">
  Card Header
</div>

您还可以在卡片头部添加图标或按钮。例如，以下代码将在卡片头部添加一个关闭按钮：

<div class="card-header">
  Card Header 
  <button type="button" class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

卡片底部

卡片底部通常包括内容的作者、发布日期或其他相关选项，可以用以下代码创建：

<div class="card-footer">
  Card Footer
</div>

自定义样式

您可以通过添加自定义 CSS 类来自定义卡片的样式。例如，以下示例添加了一个名为“card-custom”的类，该类将从卡片周围移除所有外边距和添加自定义背景颜色：

<div class="card card-custom" style="background-color: #f7dc6f; border-radius: 10px;">
  <div class="card-header">
    Card Header
  </div>
  <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 class="card-footer">
    Card Footer
  </div>
</div>

<style>
  .card-custom {
    margin: 0;
    border: none;
  }
</style>

结论

卡片是一个非常有用的组件，可以用于呈现各种内容。使用 Bootstrap 3 卡片组件非常容易，您可以随意自定义样式，以使其与您的网站或应用程序的外观和感觉相匹配。