bootStrap _ 公共樣式2

使用.p-*來設定內邊距(padding)，範圍在0-5之間和auto;

使用.m-*來設定外邊距(margin),範圍在0-5之間和auto;

<style>
    .temp {
        width: 100px;
        height: 80px;
        float: left;
        border: 1px solid red;
    }
</style>

<!--
使用.p-*來設定內邊距(padding)，範圍在0-5之間和auto;
使用.m-*來設定外邊距(margin),範圍在0-5之間和auto;
 
-->

<div class="temp p-0">p-0</div>
<div class="temp p-1">p-1</div>
<div class="temp p-2">p-2</div>
<div class="temp p-3">p-3</div>
<div class="temp p-4">p-4</div>
<div class="temp p-5">p-5</div>
<div class="temp p-auto">p-auto 貌似也沒什麼效果 等價於padding:auto</
 
div>
<div class="temp p-6">最大是5 我是6 我沒效果</div>

<div class="clearfix">

</div>
<hr>
<div class="temp m-0">m-0</div>
<div class="temp m-1">m-1</div>
<div class="temp m-2">m-2</div>
<div class="temp m-3">m-3</div>
<div class="temp m-4"
 
>m-4</div>
<div class="temp m-5">m-5</div>
<div class="temp m-auto">m-auto 貌似也沒什麼效果 等價於margin:auto</div>
<div class="temp m-6">最大是5 我是6 我沒效果</div>

都是很經常使用的啊。 下面還有講解自定義方向的。

使用.pt-*或mt-*設定邊緣的距離，這裡的t可以是top,其它還有b(bottom)、l(left)、r(right)等;

<style>
    .temp {
        width: 100px;
        height: 80px;
        float: left;
        border: 1px solid red;
    }
</style>

<!--
使用.pt-*或mt-*設定邊緣的距離，
這裡的t可以是top,其它還有b(bottom)、l(left)、r(right)等;
-->

<!--padding ： 上下左右都有 自己嘗試 這裡示例上：-->
<div class="temp pt-0">pt-0</div>
<div class="temp pt-1">pt-1</div>
<div class="temp pt-2">pt-2</div><div class="temp pt-3">pt-3</div>

<div class="clearfix"></div>
<hr>

<!--margin ： 上下左右都有 自己嘗試 這裡示例左：-->
<div class="temp ml-0">ml-0</div>
<div class="temp ml-1">ml-1</div>
<div class="temp ml-2">ml-2</div>
<div class="temp ml-3">ml-3</div>

也是0-5 這裡示範3個 這個是自定義方向的。

使用.px-*或mx-*設定左右邊緣距離，這裡的x表示(left,right);

使用.py-*或 my-*設定上下邊緣距離，這裡的y表示(top,bottom);

<!--
使用.px-*或mx-*設定左右邊緣距離，這裡的x表示(left,right);
使用.py-*或 my-*設定上下邊緣距離，這裡的y表示(top,bottom);
Tips： *最大也是5  這裡舉個例 0 - 3：
-->

<!--padding ： 上下一起（py-*）-->
<div class="temp py-0">py-0</div>
<div class="temp py-1">py-1</div>
<div class="temp py-2">py-2</div>
<div class="temp py-3">py-3</div>

<div class="clearfix"></div>
<hr>

<!--padding ： 左右一起（px-*）-->
<div class="temp px-0">px-0</div>
<div class="temp px-1">px-1</div>
<div class="temp px-2">px-2</div>
<div class="temp px-3">px-3</div>

<div class="clearfix"></div>
<hr>
mx-* / my-*
<hr>
<!--margin ： 上下一起（my-*）-->
<div class="temp my-0">my-0</div>
<div class="temp my-1">my-1</div>
<div class="temp my-2">my-2</div>
<div class="temp my-3">my-3</div>

<div class="clearfix"></div>
<hr>

<!--margin ： 左右一起（mx-*）-->
<div class="temp mx-0">mx-0</div>
<div class="temp mx-1">mx-1</div>
<div class="temp mx-2">mx-2</div>
<div class="temp mx-3">mx-3</div>

也是0-5 這裡示範3個 這個是上下一起 、 左右一起的。

使用.pt-*-5,*可以是md、lg等響應式的方式來設定邊緣;

<style>
    .temp {
        width: 100px;
        height: 80px;
        float: left;
        border: 1px solid red;
    }
</style>

<!--
使用.pt-*-5,*可以是md、lg等響應式的方式來設定邊緣;
//這個自己去試啊 有了前面的經驗 這個沒問題了吧
-->

<div class="temp mt-sm-3"></div>
<div class="temp pt-xl-3"></div>
......等

使用.w-*設定元素的長度，包括25%、50%、75%、100%和auto;

使用.h-*設定元素的高度，包括25%、50%、75%、100%和auto;

<style>
    .temp {
        border: 1px solid red;
    }
</style>

<!--
使用.w-*設定元素的長度，包括25%、50%、75%、100%和auto;
使用.h-*設定元素的高度，包括25%、50%、75%、100%和auto;
-->

<div class="temp w-25">w-25</div>
<div class="temp w-50">w-50</div>
<div class="temp w-75">w-75</div>
<div class="temp w-100">w-100</div>
<div class="temp w-auto">w-auto</div>
<hr>
<br>
<div style="height: 200px;">
<div class="temp d-inline-block bg-info h-25">h-25</div>
<div class="temp d-inline-block bg-info h-50">h-50</div>
<div class="temp d-inline-block bg-info h-75">h-75</div>
<div class="temp d-inline-block bg-info h-100">h-100</div>
<div class="temp d-inline-block bg-info h-auto">h-auto</div>
</div>

使用.mw-*和.mh-*設定max-width和max-height;

使用.vw-*和.vh-*設定相對於視窗的大小;

<style>
    .temp {
        width: 1000px;
        height: 100px;
        border: 1px solid red;
    }
</style>

<!--
使用.mw-*和.mh-*設定max-width和max-height;
使用.vw-*和.vh-*設定相對於視窗的大小;
-->

<!--沒啥用-->
<div class="temp mw-100"></div>
<br>
<div class="temp mh-100"></div>

<!--設定相對於視窗的大小-->
<div class="temp vw-100"></div>
<div class="temp vh-100"></div>

使用.shadow-*實現元素的陰影效果;

<style>
    .temp {
        width: 100px;
        display: inline-block;
    }
</style>

<!--
使用.shadow-*實現元素的陰影效果;
-->

<div class="temp shadow-none">無陰影shadow-none</div>
<div class="temp shadow">普通陰影shadow</div>
<div class="temp shadow-sm">小陰影shadow-sm</div>
<div class="temp shadow-lg">大陰影shadow-lg</div>