一、速览 Web框架 BootStrap4 —— BootStrap4 基础

BootStrap4 集成了快捷灵活的布局，我们只用根据需要引用布局样式即可，可以帮助我们快速开发Web网页。封装了CSS样式，直接调用，非常适合只有HTML基础的后端人员使用。

隐藏与显示

    <p class="d-none d-md-block">超小屏幕以上隐藏，中等以上屏幕显示</p>
    <p class="d-md-none">中等以上屏幕隐藏</p>

表格样式

  <table class="table table-dark "> </table>
  <table class="table "><thead class="thead-dark"> </thead></table>

内容排版

文本类

标题样式 .h1 .h2 .h6, 超大文本 display-1 display-4
文本强调 .lead, HTML5中的 .mark, .small 等, 悬浮提示.title
块引用 blockquote, 备注引用源 .blockquote-footer
居中对齐 .text-center 或居右对齐 .text-right

列表类

省略文字溢出 .text-truncate
多列并排 list-inline .list-inline-item
去除样式 list-unstyled

代码类

标识代码<code>有斜体效果，标识变量 <var>，

实现固定区域滚动 .pre-scrollable

<pre class="pre-scrollable" style="width:500px">
  <code>
      var <var>a</var> = <var>b</var> + <var>c</var>;
      <var>var a = a + b</var>
      function demo(a, b){
          alert('this is a test!');
      }
  </code>
</pre>

标识键盘输入 <kdb>

<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>

标识示例 <samp>

图文类

图片宽度拉满 .img-fluid，设置空心框 img-thumbnail

<img src="images/banner.jpg" class="img-fluid" alt="">
<img src="images/qrcode.png" class="img-thumbnail" alt="">

图片居中，图片本身是内联块属性，所以父级直接.text-center也居中
```
<div class="text-center">
  <img src="images/qrcode.png" alt="">
</div>
```

图文组合

<figure class="figure">
  <img src="images/qrcode.png" class="figure-img img-thumbnail"  alt="">
  <figcaption class="figure-caption text-center">关注我们</figcaption>
</figure>

响应式图片

<picture>
  <source srcset="images/qrcode.png" media="(max-width:500px)">
  <img src="images/banner.jpg" alt="">
</picture>

公共样式

内容部分

构建关闭按钮
```
<button class="close"><span>&times;</span></button>
```

清除浮动 .clearfix，根据屏幕尺寸浮动 .float-md-left,

<div class="clearfix">
  <div class="float-left">
      left1;
  </div>
  <div class="float-right">
      right1;
  </div>
</div>

区域显示方式 .overflow-auto, .overflow-hidden
文本超出自动添加滚动条，文本超出隐藏超出部分。

内容可见性 .visible, .invisible

<button class="close"><span>&times;</span></button>

隐藏标签内容，不影响SEO .text-hide
让标签内容不显示在浏览器上，但能被搜索引擎搜索

文本对齐方式 align-*

<span class="align-baseline">基准线</span>
<span class="align-text-top">文本顶部</span>
<span class="align-top">顶部</span>
<span class="align-middle">垂直居中</span>
<span class="align-bottom">底部</span>
<span class="align-text-bottom">文本底部</span>

盒子相关

margin .m-*， padding p-*；* 值为0~5，auto
mt-*，pt-*；t(top)、b(bottom)、l(left)、r(right)
mx-* px-*；x表示(left,right)
my-* py-*；y表示(top,bottom)
pt-*-5；* 可设置响应式内边距
w-*；*为25 50 75 100 auto，宽度所占百分比
h-*；*为25 50 75 100 auto，高度所占百分比
.mw-* .mh-* 设置 max-width max-height
.vw-* .vh-* 设置相对于窗口的大小
.shadow-* 实现元素的阴影效果

字体相关

.d-* 设置display，none、inline、inline-block、block、table、table-row
.d-md-* 设置响应式的媒体查询效果
.embed-responsive 实现嵌入响应式，例如 <frame> <embed>
.embed-responsive-16by9 实现响应式比例
.text-* 设置文本对齐方式，left、center、right
.text-md-* 实现响应式
.text-wrap .text-nowrap 设置文本换行是否溢出
.text-truncate 设置文本溢出省略
.text-break 设置强制换行
.text-lowercase .text-uppercase .text-capitalize 设置大小写
.text-monospace 设置等宽字体
.text-reset 实现字体颜色的重置
.text-decoration-none 删除超链接下划线
.font-weight-bold .font-weight-normal .font-weight-light .font-italic