Bootstrap4样式之工具类

1 构建关闭按钮

使用.close和&time构建一个关闭按钮

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

2 实现浮动

使用.float-left、.float-right，.float-none实现浮动效果，同时使用.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="float-none border border-success"></div>

同时，还有float-[sm|md|lg|xl]-left、float-[sm|md|lg|xl]-right和float-[sm|md|lg|xl]-none实现不同屏幕的浮动效果。

3 隐藏标签元素

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

<h1 class="text-hide">bootstrapv4.0</h1>

4 设置区域溢出的显示

使用.overflow-auto和.overflow-hidden来设置区域溢出的显示方式

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

<div class="border border-success overflow-auto">
<!-- 设置带滚动条显示 -->
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
		<p>overflow-auto</p>
	</div>
	<div class="border border-success overflow-hidden">
<!-- 设置区域溢出部分隐藏 -->
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
		<p>overflow-hidden</p>
	</div>	

5 设置元素可见与不可见

使用.visible和.invisible来设置内容的可见和不可见

<div class="visible">visible</div>
<div class="invisible">invisible</div>

6 设置内容对齐方式

使用.align-*来内容对齐方式
.align-baseline
.align-top
.align-middle
.align-bottom
.align-text-top
.align-text-bottom

span{
	background: #ddd;
	height: 50px;
	display: inline-block;
}

<div class="border border-warning">
	<span class="align-baseline">align-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>
</div>
<table class="table table-bordered" style="height: 200px;">
	<tr>
		<td class="align-baseline">align-baseline基准</td>
		<td class="align-top">top顶部</td>
		<td class="align-middle">middle垂直居中</td>
		<td class="align-bottom">bottom底部</td>	
	</tr>
</table>

7 设置内边距

使用.p-*来设置内边距（padding），范围0-5之间和auto，数字越小，内边距越小。同时，也可以使用.p-[sm|md|lg|xl]-*实现不同屏幕的内边距设置。

<span class="p-3 p-md-5 border border-success">Bootstrapv4.0</span>

使用.pt-*,来设置上内边距，同时也可以使用.pt-[sm|md|lg|xl]-*来设置不同屏幕的上内边距。
使用.pr-*,来设置右内边距，同时也可以使用.pr-[sm|md|lg|xl]-*来设置不同屏幕的右内边距。
使用.pl-*来设置左内边距，同时也可以使用.pl-[sm|md|lg|xl]-*来设置不同屏幕的左内边距。
使用.pb-*来设置下内边距，同时也可以使用.pr--[sm|md|lg|xl]-*来设置不同屏幕的下内边距。
使用.px-*来设置左右内边距，同时也可以使用.px-[sm|md|lg|xl]-*来设置不同屏幕的左右内边距。
使用py-*来设置上下内边距, 同时也可以使用py–[sm|md|lg|xl]-*来设置不同屏幕的上下内边距。

8 设置外边距。

使用.m-*来设置外边距（margin），范围0-5之间和auto。数字越小，外边距越大。同时，也可以使用.m-[sm|md|lg|xl]-*实现不同屏幕的外边距设置.。

<div class="border border-success">
	<div class="m-3 m-md-5 border border-danger">Bootstrapv4.0</div>
</div>

使用.mt-*,来设置上外边距，同时也可以使用.mt-[sm|md|lg|xl]-*来设置不同屏幕的上外边距。
使用.mr-*,来设置右外边距，同时也可以使用.mr-[sm|md|lg|xl]-*来设置不同屏幕的右边距。
使用ml-*来设置左外边距，同时也可以使用ml-[sm|md|lg|xl]-*来设置不同屏幕的左外边距。
使用.mb-*来设置下外边距，同时也可以使用.mr--[sm|md|lg|xl]-*来设置不同屏幕的下外边距。
使用.mx-*来设置左右外边距，同时也可以使用.mx-[sm|md|lg|xl]-*来设置不同屏幕的左右外边距。
使用.my-*来设置上下外边距, 同时也可以使用.my-[sm|md|lg|xl]-*来设置不同屏幕的上下外边距。

9 设置元素尺寸

使用.w-*来设置元素的宽度，*号表示25，50，75，100，auto这些值。

<div class="border border-success">
	<div class="w-25 border border-danger">Bootstrapv4.0</div>
</div>

使用.h-*来设置元素的高度，*号表示25，50，75，100，auto这些值。

10 设置元素最大最小尺寸为100%

使用.mw-100和.mh-100设置max-width和max-height的值为100%。
使用.min-vw-100和.min-vh-100设置min-width和min-height的值为100%。
使用.vw-100和.vh-100来设置尺寸为相对于窗口100%。

11 设置元素阴影效果

使用.shadow实现元素的阴影效果，也可以使用.shadow-[sm|md|lg|xl]设置不同屏幕的阴影效果。使用.shadow-none取消元素的阴影效果。

12 设置元素的display模式

使用.d-*来设置元素的display模式，*为none、inline、block、inline-block、table、table-row等。也可以使用.d-[sm|md|lg|xl]-*来设置不同屏幕下元素的display模式。

13 设置文本的对齐方式

使用.text-*设置文本的对齐方式，*为left、right、center、between等，也可以使用.text-[sm|md|lg|xl]-*设置不同屏幕的文本对齐方式。

14 设置文本溢出换行

使用.text-wrap和.text-nowrap来设置文本溢出是否换行。
使用.text-break对于很长的字符串，且中间没有空格实现换行。

15 设置字母大小写

使用.text-lowercase设置字母全小写、.text-uppercase设置字母全大写和.text-capitalize设置首字母大写。

16 设置字体样式

使用.font-wight-*设置字体样式。
.font-weight-bold加粗
.font-weight-normal正常
.font-weight-light纤细
font-weight-italic倾斜

<span class="font-weight-bold">BootstrapV4.0</span>
<span class="font-weight-normal">BootstrapV4.0</span>
<span class="font-weight-light">BootstrapV4.0</span>
<span class="font-weight-italic">BootstrapV4.0</span>

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

<span class="text-monospace">BootstrapV4.0</span>

17 删除超链接下划线

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

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