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>