Bootstrap4 卡片学习笔记

Bootstrap是一个流行的前端框架，它提供了多种UI组件，卡片是其中一种常用的组件。本学习笔记将介绍Bootstrap4卡片的基本用法和实例应用。

基本用法

Bootstrap4提供了一种简便的方法来创建卡片，使用.card类即可创建一个卡片。

htmlCopy Code
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

上面的代码将在页面中创建一个简单的卡片，其中.card-body类指定了卡片的内容。你可以在.card-body元素中添加任何内容，包括文字、图片或其他HTML元素。

样式和布局

Bootstrap4的卡片还有很多样式和布局选项可供选择。下面是一些常见的样式和布局示例：

Header and Footer

使用.card-header类和.card-footer类可以添加卡片头部和底部：

htmlCopy Code
<div class="card">
  <div class="card-header">
    Featured
  </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 class="card-footer">
    Footer
  </div>
</div>

图片

使用.card-img-top类可以将图像置于卡片的顶部：

htmlCopy Code
<div class="card">
  <img class="card-img-top" src="...">
  <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>

列表组件

列表组件可以将卡片的内容显示为列表形式，使用.list-group类可以添加列表组件：

htmlCopy Code
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

示例应用

下面是一个简单的卡片布局应用示例，展示了如何使用Bootstrap4创建一个响应式卡片布局：

htmlCopy Code
<div class="row">
  <div class="col-md-4">
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/350x150" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia augue a nunc tincidunt, eget laoreet enim lacinia. </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/350x150" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia augue a nunc tincidunt, eget laoreet enim lacinia. </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/350x150" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia augue a nunc tincidunt, eget laoreet enim lacinia. </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

上述代码会创建一个包含三个卡片的响应式网格布局，每个卡片包含一个图像、标题和文本，并带有一个按钮。