Bootstrap 工具类
作者：互联网
公共样式
1. 使用.close 和× 构建一个关闭按钮；
<button type="button" class="close" aria-label="关闭">
<span aria-hidden="true">×</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/img1.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>
PS：垂直对齐仅影响内联 inline、内联块 inline-block、内联表 inline-table、
表格单元格 table cell 元素
9. 使用.p-*来设置内边距(padding)，范围在 0-5 之间和 auto；
<span class="p-5">Bootstrap4.x</span>
10. 使用.m-*来设置外边距(margin)，范围在 0-5 之间和 auto；
<span class="m-5">Bootstrap4.x</span>
11. 使用.pt-*或 mt-*设置边缘的距离，这里的 t 可以是 top；
12. 其它的还有 b(bottom)、l(left)、r(right)等；
<span class="pt-5">Bootstrap4.x</span> <span class="mt-5">Bootstrap4.x</span>
13. 使用.px-*或 mx-*设置左右边缘的距离，这里的 x 表示(left、right);
<span class="px-5">Bootstrap4.x</span> <span class="mx-5">Bootstrap4.x</span>
14. 使用.py-*或 my-*设置上下边缘的距离，这里的 y 表示(top、bottom)；
<span class="py-5">Bootstrap4.x</span> <span class="my-5">Bootstrap4.x</span>
15. 使用.pt-*-5，*可以是 md、lg 等响应式的方式来设置边缘；
16. 使用.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>
17. 使用.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>
18. 使用.mw-*和.mh-*设置 max-width 和 max-height；
<div class="p-3 mw-100 mh-100 bg-info">max-100%</div>
19. 使用.vw-*和.vh-*设置相对于窗口的大小；
<div class="p-3 vw-100 vh-100 bg-info">vw,vh 单位</div>
20. 使用.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>
21. 使用.d-*来设置元素的 display 模式，比如 inline、block 等；
22. none、inline、inline-block、block、table、table-row
23. flex、inline-flex 这些常用的均为 display 可以设置的模式；
<div class="p-2 bg-info d-inline">Bootstrap4.x</div>
24. 也可以通过.d-md-*中的 md 设置响应式的媒体查询效果；
<div class="p-2 bg-info d-md-none">Bootstrap4.x</div>
25. 使用.embed-responsive 实现嵌入响应式，比如<iframe>、<embed>等；
26. 再使用.embed-responsive-16by9 实现响应式比例，还可以 21:9，4:3，1:1；
<div class="embed-responsive embed-responsive-21by9">
<iframe src="http://www.baidu.com"></iframe>
</div>
27. 使用.text-*设置文本的对齐方式，有 left、center、right；
28. 也可以设置.text-md-*实现响应式的媒体查询效果；
<div class="p-2 text-center">Bootstrap4.x</div>
29. 使用.text-warp 和.text-nowarp 实现文本溢出时是否换行；
<div class="p-2 text-nowrap text-center" style="width: 6rem;">Bootstrap 4.x</div>
30. 使用.text-break 对于很长的字符串，且中间没有空格实现换行；
<div class="p-2 text-break"> Bootstrap4.x...Bootstrap4.x</div>
31. 使用.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>
32. 使用.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>
33. 使用.text-monospace 设置等宽字体；
<div class="p-2 text-monospace">Bootstrap 4.x</div>
34. 使用.text-reset 实现字体颜色的重置；
<div class="text-muted">
Bootstrap 最新版本： <a href="#" class="text-reset">V4.3</a>
</div>
35. 使用.text-decoration-none 删除超链接下划线；
<a href="#" class="text-decoration-none">V4.3</a>
内容选自李炎恢的Bootstrap v4.x教程笔记
标签：auto,text,Bootstrap,设置,使用,Bootstrap4,inline,工具 来源： https://www.cnblogs.com/seeding/p/15351800.html