Bootstrap 4样式的工具类总结

一、 公共样式
1、 使用.close和&times构建一个关闭按钮

2、 使用.clearfix给浮动的区域的父元素添加，实现清理浮动的功能。Float - [sm | md | lg | xl ] – lef t、float - [ sm | md | lg |xl ]- right和float - [ sm | md | lg | xl ] – none.


3、 使用.text-hide隐藏元素标签的内容，本身还保持seo的优化

4、 使用.overflow-auto和.overflow-hidden来设置区域显示方式

5、 使用.visible和.invisible设置元素可见可不见,位置占着，隐藏的位置没有占了

6、 使用.align-*设置对齐方式，和下面是不一样的
.align-baseline
.align-top
.align-middle
.align-bottom
.align-text-top
.align-text-bottom


7、 使用.p-*设置内边距（padding），范围在0-5之间和auto；
8、 使用m-*设置外边距（margin）,范围在0-5之间和auto.

使用.pt-*,来设置上内边距，同时也可以使用.pt - [sm | md | lg | xl ]-来设置不同屏幕的上内边距。
使用.pr-,来设置右内边距，同时也可以使用.pr - [ sm | md | lg | xl ]-*来设置不同屏幕的右内边距。
使用.pl-*来设置左内边距，同时也可以使用.pl - [ sm | md | lg | xl ]-*来设置不同屏幕的左内边距。
使用.pb-*来设置下内边距，同时也可以使用.pb -[ sm | md | lg |xl ] - *来设置不同屏幕的下内边距。
使用.px-*来设置左右内边距，同时也可以使用.px - [ sm | md | lg | xl ]-*来设置不同屏幕的左右内边距。
使用py-*来设置上下内边距, 同时也可以使用py – [ sm | md | lg | xl ]-来设置不同屏幕的上下内边距。
使用.mt-,来设置上外边距，同时也可以使用.mt - [ sm | md | lg | xl ] - 来设置不同屏幕的上外边距。
使用.mr-,来设置右外边距，同时也可以使用. mr - [ sm | md | lg | xl ] - *来设置不同屏幕的右边距。
使用ml-*来设置左外边距，同时也可以使用ml - [ sm | md | lg | xl ]-*来设置不同屏幕的左外边距。
使用.mb-*来设置下外边距，同时也可以使用.mb -[ sm | md | lg | xl ]-*来设置不同屏幕的下外边距。
使用.mx-*来设置左右外边距，同时也可以使用.mx - [ sm | md | lg | xl ] - *来设置不同屏幕的左右外边距。
使用.my-*来设置上下外边距, 同时也可以使用.my - [ sm | md | lg | xl ] - *来设置不同屏幕的上下外边距。
使用w-*设置元素长度,*固定值可以为25%、50%、75%、100%。

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

10、使用.mw-*和.mh-*设置max-width和max-height;

24、使用.vw-*和.vh-*设置相对于窗口的大小。.vw-100和.vh-100来设置尺寸为相对于100%

25、使用.shade-*实现元素的阴影效果，可以使用.shadow- [ sm | md | lg | xl ]设置不同屏幕的阴影效果

11、 使用.d-*来设置display模式 ，*为none、inline、block、inline-block、table、table-row等；

同时也可以使用.d – [ sm | md | lg | xl ]-*来设置不同屏幕display模式。

12、 使用.embed-responsive实现嵌入响应式，使用.embed-responsive-16py9实现响应式比例，可以为21:9,4:3,1:1；

13、使用.text-*，设置文本的对齐方式，*有Left、center、right；

同时也可以使用.d – [ sm | md | lg | xl ]-*来设置不同屏幕文本对齐效果。
14、 使用.text-wrap和.text-nowrap实现溢出时是否换行；

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

15、 使用字母大小写，text-lowercase全部小写 text-uppercase全部大写 text- capitalize首字母大写。

16、、 设置字体样式
17、使用.text-monospace设置等宽大小的字体

18、使用.text-reset设置字体样式与父元素一样，使用.text-decoration-none 删除超链接的下划线。