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>