10 bootStrap _ 公共样式2

Posted 2021-06-11

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>