第十二谈：卡片

本节课我们来开始学习 Bootstrap 的内容扩展管理器，卡片的使用方式，其中我分上下两部分来说明。

一．卡片（上）

1. 卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合；
2. 先使用.card 来构建卡片，然后可以使用.card-body 建立卡片主体内容；

      <div class="card" style="width: 300px;">
          <div class="card-body">
              卡片主体
          </div>
      </div>

3. 卡片主体标题可以使用.card-title(标题).card-subtitle(小标题)等；

      <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <h6 class="card-subtitle text-muted">小标题</h6>
      </div>

4. 卡片主体使用.card-text 代表文本内容；

      <div class="card-body">
          <p class="card-text">这里是卡片的文本内容！...</p>
      </div>

5. 卡片主体使用.card-link 代表超链接；

      <div class="card-body">
          <a href="#" class="card-link">注册</a>
          <a href="#" class="card-link">登录</a>
      </div>

6. 使用.card-img-top 可以设计一个带主题图片的内容管理器；

      <div class="card" style="width: 300px">
          <img class="card-img-top" src="img/bt.png" alt="bt">
          <div class="card-body">
              这里是介绍 Bootstrap4.x 课程内容的文本！
          </div>
      </div>

7. 使用.card-header 设置一个列表组的标头；

      <div class="card" style="width: 300px;">
          <div class="card-header">
              列表标题
          </div>
          <ul class="list-group list-group-flush">
              <li class="list-group-item">列表 1</li>
              <li class="list-group-item">列表 2</li>
              <li class="list-group-item">列表 3</li>
          </ul>
      </div>

8. 使用.card-footer 配合.card-header，负责页眉页脚；

      <div class="card" style="width: 300px;">
          <div class="card-header">
              页眉
          </div>
          <div class="card-body">
              主体
          </div>
          <div class="card-footer">
              页脚
          </div>
      </div>

9. 卡片默认是 100%显示的，可以使用栅格系统嵌套来固定卡片的布局；

      <div class="container-fluid">
          <div class="row">
              <div class="col-sm-4">
                  ...
              </div>
          </div>
      </div>

10. 也可以使用.w-25、.w-50、w-75、w-100 来设置卡片的显示百分比；

      <div class="card w-25">

11. 卡片支持文本的整体对齐和局部的对齐方式，采用.text-center 等；

      <div class="card text-right">
      <div class="card-body text-left">

一．卡片（下）

1. 卡片使用.card-header-tabs 可以配合列表 ul 实现导航功能；

      <div class="card text-center" style="width: 500px;">
          <div class="card-header">
              <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                      <a href="#" class="nav-link active">主页</a>
                  </li>
                  <li class="nav-item">
                      <a href="#" class="nav-link">内容</a>
                  </li>
                  <li class="nav-item">
                      <a href="#" class="nav-link disabled">关于</a>
                  </li>
              </ul>
          </div>
          <div class="card-body">
              ...
          </div>
      </div>

2. 将 ul 中的文本改成按钮式：.nav-pills、.card-header-pills 实现按钮导航；

      <ul class="nav nav-pills card-header-pills">

3. 卡片中.card-img 插入一个整体的图片，再配合.card-img-overlay 实现背景；
4. 这种做法并不是真的作为背景，而是通过定位，让文字浮动在图片上进行编辑；

      <div class="card bg-info text-black w-75">
          <img src="img/bt.png" alt="Bootstrap" class="card-img">
          <div class="card-img-overlay">
              <p>在图片上的文本</p>
          </div>
      </div>

5. 卡片通过内部栅格，也可以实现左右水平排列的图文显示；

      <div class="card w-75">
          <div class="row">
              <div class="col-sm-6">
                  <img src="img/bt.png" alt="Bootstrap" class="card-img">
              </div>
              <div class="col-sm-6">
                  <div class="card-title">图片标题</div>
                  <div class="card-text">图片文本</div>
              </div>
          </div>
      </div>

6. 卡片可以定制自己的背景和颜色，这里并无组件样式，均为之前所配置；

      <div class="card text-white bg-dark" style="width: 300px;">
          <div class="card-header">
              标题
          </div>
          <div class="card-body">
              <p class="card-text">这里是卡片的文本内容！...</p>
          </div>
      </div>

7. 卡片可以定制自己的边框，直接使用之前的边框组件样式即可；

      <div class="card border-info" style="width: 300px;">
          <div class="card-header text-info">
              标题
          </div>
          <div class="card-body text-info">
              <p class="card-text">这里是卡片的文本内容！...</p>
          </div>
      </div>

8. 在.card 元素外层，构建一个.card-group 分组，可以紧紧将每个卡片贴在一起；

      <div class="card-group">
          <div class="card">
          ...

9. .card-group 本身就具有栅格系统，但会紧贴；对应的.card-deck，提供间隙；

      <div class="card-deck">
          <div class="card">
          ...

10. 有时，卡片的高度不一，上面两种会自动补全，换行也会留有巨大空隙；
11. 这时，采用.card-columns 可以自我进行填充，均分空隙；

      <div class="card-columns">