【Bootstrap V4系列】学习入门教程之 组件-卡片（Card）高级用法

【Bootstrap V4系列】学习入门教程之 组件-卡片（Card）高级用法

• [一、Sizing 尺寸](#一、Sizing 尺寸)
• • [1.1 Using grid markup 使用网格标记](#1.1 Using grid markup 使用网格标记)
  • [1.2 Using utilities 使用实用程序](#1.2 Using utilities 使用实用程序)
  • [1.3 Using custom CSS 使用自定义CSS](#1.3 Using custom CSS 使用自定义CSS)
• [二、Text alignment 文本对齐方式](#二、Text alignment 文本对齐方式)
• [三、Navigation 导航](#三、Navigation 导航)

一、Sizing 尺寸

卡片开始时没有特定的宽度，因此除非另有说明，否则它们将是100%宽的。您可以根据需要使用自定义CSS、网格类、网格Sass混入或实用程序进行更改。

1.1 Using grid markup 使用网格标记

使用网格，根据需要将卡片包裹在列和行中。

<!--Using grid markup-->
<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <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>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <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>
    </div>
</div>

页面展示效果：

1.2 Using utilities 使用实用程序

使用我们为数不多的可用尺寸工具快速设置卡片的宽度。

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

页面展示效果：

1.3 Using custom CSS 使用自定义CSS

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

<div class="card" style="width: 18rem;">
  <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>

页面展示效果：

二、Text alignment 文本对齐方式

您可以使用我们的文本对齐类快速更改任何卡片的文本对齐方式，无论是整体还是特定部分。

<div class="card" style="width: 18rem;">
  <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>

<div class="card text-center" style="width: 18rem;">
  <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>

<div class="card text-right" style="width: 18rem;">
  <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>

页面展示效果：

三、Navigation 导航

使用Bootstrap的导航组件为卡片的标题（或块）添加一些导航。

<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" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </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>

页面展示效果：

<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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </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>

页面展示效果：