第七谈：工具类

本节课我们来开始学习 Bootstrap 的一些公共样式，我准备分为上、中、下三部分来完成讲解。

公共样式【上】

1. 使用.close 和&times 构建一个关闭按钮；

      <button type="button" class="close" aria-label="关闭">
          <span aria-hidden="true">&times;</span>
      </button>

2. 使用.clearfix 给浮动的区域的父元素添加，实现清理浮动的功能；

      div.border {
          width: 200px;
          height: 200px;
      }

      <div class="clearfix">
          <div class="float-left border border-success">left</div>
          <div class="float-right border border-success">right</div>
      </div>
      <div class="border border-warning">both</div>

3. 使用.float-left、.float-right、.float-none 实现浮动效果；
4. 还可以使用.float-*-left 等来实现不同屏幕的浮动效果；

      <div class="float-md-left border border-success">left</div>
      <div class="float-md-right border border-success">right</div>

5. 使用.text-hide 来隐藏元素标签内容，但本身还存在保持 SEO 优化；

      <h1 class="text-hide" style="background:url('img/1.png');">
          Bootstrap4.x
      </h1>

6. 使用.overflow-auto 和.overflow-hidden 来设置区域显示方式（溢出部分显示方式）；

      <div class="overflow-auto">...</div>
      <div class="overflow-hidden">...</div>

7. 使用.visible 和.invisible 来设置内容可见或不可见；

      <div class="visible">Bootstrap4.x</div>
      <div class="invisible">Bootstrap4.x</div>

8. 使用.align-*来设置内容文本的对齐方式；

      <span class="align-baseline">baseline 基准</span>
      <span class="align-text-top">text-top 文本顶部</span>
      <span class="align-top">top 顶部</span>
      <span class="align-middle">middle 垂直居中</span>
      <span class="align-bottom">bottom 底部</span>
      <span class="align-text-bottom">text-bottom 文本底部</span>
      
      <table class="table table-bordered" style="height: 200px;">
          <tbody>
              <tr>
                  <td class="align-baseline">baseline</td>
                  <td class="align-top">top</td>
                  <td class="align-middle">middle</td>
                  <td class="align-bottom">bottom</td>
                  <td class="align-text-top">text-top</td>
                  <td class="align-text-bottom">text-bottom</td>
              </tr>
          </tbody 
      </table>

注意：垂直对齐仅影响内联 inline、内联块 inline-block、内联表 inline-table、表格单元格 table cell 元素。

公共样式【中】

1. 使用.p-*来设置内边距(padding)，范围在 0-5 之间和 auto；

      <span class="p-5">Bootstrap4.x</span>   

2. 使用.m-*来设置外边距(margin)，范围在 0-5 之间和 auto；

      <span class="m-5">Bootstrap4.x</span>

3. 使用.pt-或 mt-设置边缘的距离，这里的 t 可以是 top；
4. 其它的还有 b(bottom)、l(left)、r(right)等；

      <span class="pt-5">Bootstrap4.x</span>
      <span class="mt-5">Bootstrap4.x</span>  

5. 使用.px-或 mx-设置左右边缘的距离，这里的 x 表示(left、right);

      <span class="px-5">Bootstrap4.x</span>
      <span class="mx-5">Bootstrap4.x</span>

6. 使用.py-或 my-设置上下边缘的距离，这里的 y 表示(top、bottom)；

      <span class="py-5">Bootstrap4.x</span>
      <span class="my-5">Bootstrap4.x</span>

7. 使用.pt-*-5，*可以是 md、lg 等响应式的方式来设置边缘；
8. 使用.w-*设置元素的长度，包括 25%、50%、75%、100%和 auto；

      <div class="p-3 w-25 bg-info">25%</div>
      <div class="p-3 w-50 bg-info">50%</div>
      <div class="p-3 w-75 bg-info">75%</div>
      <div class="p-3 w-100 bg-info">100%</div>
      <div class="p-3 w-auto bg-info">auto</div>

9. 使用.h-*设置元素的高度，包括 25%、50%、75%、100%和 auto；

      <div class="border border-success">
          <div class="p-3 h-25 bg-info d-inline-block">25%</div>
          <div class="p-3 h-50 bg-info d-inline-block">50%</div>
          <div class="p-3 h-75 bg-info d-inline-block">75%</div>
          <div class="p-3 h-100 bg-info d-inline-block">100%</div>
          <div class="p-3 h-auto bg-info d-inline-block">auto</div>
      </div>

10. 使用.mw-和.mh-设置 max-width 和 max-height；

      <div class="p-3 mw-100 mh-100 bg-info">max-100%</div>

11. 使用.vw-和.vh-设置相对于窗口的大小；

      <div class="p-3 vw-100 vh-100 bg-info">vw,vh 单位</div>

12. 使用.shadow-*实现元素的阴影效果；

      <div class="shadow-none mb-5">Bootstrap4.x</div>
      <div class="shadow-sm mb-5">Bootstrap4.x</div>
      <div class="shadow mb-5">Bootstrap4.x</div>
      <div class="shadow-lg mb-5">Bootstrap4.x</div>

公共样式【下】

1. 使用.d-*来设置元素的 display 模式，比如 inline、block 等；
2. none、inline、inline-block、block、table、table-row
3. flex、inline-flex 这些常用的均为 display 可以设置的模式；

      <div class="p-2 bg-info d-inline">Bootstrap4.x</div>

4. 也可以通过.d-md-*中的 md 设置响应式的媒体查询效果；

      <div class="p-2 bg-info d-md-none">Bootstrap4.x</div>

5. 使用.embed-responsive 实现嵌入响应式，比如<iframe>、<embed>等；
6. 再使用.embed-responsive-16by9 实现响应式比例，还可以 21:9，4:3，1:1；

      <div class="embed-responsive embed-responsive-21by9">
          <iframe src="http://www.baidu.com"></iframe>
      </div>

7. 使用.text-*设置文本的对齐方式，有 left、center、right；
8. 也可以设置.text-md-*实现响应式的媒体查询效果；

      <div class="p-2 text-center">Bootstrap4.x</div>

9. 使用.text-warp 和.text-nowarp 实现文本溢出时是否换行；

      <div class="p-2 text-nowrap text-center" style="width: 6rem;">
          Bootstrap 4.x
      </div>

10. 使用.text-break 对于很长的字符串，且中间没有空格实现换行；

      <div class="p-2 text-break">
          Bootstrap4.x...Bootstrap4.x
      </div>

11. 使用.text-lowercase 设置小写，.text-uppercase 设置大写，以及.text-capitalize 设置首字母大写；

      <div class="p-2 text-lowercase">the bootstrap4.x</div>
      <div class="p-2 text-uppercase">the bootstrap4.x</div>
      <div class="p-2 text-capitalize">the bootstrap4.x</div>

12. 使用.font-weight-bold 加粗、.font-weight-normal 正常、.font-weight-light 纤细、.font-weight-italic 倾斜；

      <div class="p-2 font-weight-bold">Bootstrap4.x</div>
      <div class="p-2 font-weight-normal">Bootstrap4.x</div>
      <div class="p-2 font-weight-light">Bootstrap4.x</div>
      <div class="p-2 font-italic">Bootstrap4.x</div>

13. 使用.text-monospace 设置等宽字体；

      <div class="p-2 text-monospace">Bootstrap 4.x</div>

14. 使用.text-reset 实现字体颜色的重置；

      <div class="text-muted">
          Bootstrap 最新版本：
          <a href="#" class="text-reset">V4.3</a>
      </div>

15. 使用.text-decoration-none 删除超链接下划线；

      <a href="#" class="text-decoration-none">V4.3</a>