Bootstrap4各种小工具介绍

1、边框使用border类可以添加或移除边框:实例<span class="border"></span><span class="border border-0"></span><span class="border border-top-0"></span><span class="border border-right-0"></span><span class="border border-bottom-0"></span><span class="border border-left-0"></span>

2、边框颜色Bootstrap4 提供了一些类来设置边框颜色:实例<span class="border border-primary"></span><span class="border border-secondary"></span><span class="border border-success"></span><span class="border border-danger"></span><span class="border border-warning"></span><span class="border border-info"></span><span class="border border-light"></span><span class="border border-dark"></span><span class="border border-white"></span>

3、边框圆角设置使用rounded类可以添加圆角边框:实例<span class="rounded"></span><span class="rounded-top"></span><span class="rounded-right"></span><span class="rounded-bottom"></span><span class="rounded-left"></span><span class="rounded-circle"></span><span class="rounded-0"></span>

4、浮动.float-right类用于设置元素右浮动，.float-left设置元素左浮动,.clearfix类用于清除浮动:实例<div class="clearfix"> <span class="float-left">左浮动</span> <span class="float-right">右浮动</span></div>

5、响应式浮动我们看可以设置浮动 (.float-*-left|right- * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:实例<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br><div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br><div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br><div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br><div class="float-none">没有浮动</div>

6、居中对齐使用.mx-auto类来设置居中对齐:实例<div class="mx-auto bg-warning" style="width:150px">居中显示</div>

7、宽度元素上使用 w-* 类 (.w-25,.w-50,.w-75,.w-100,.mw-100) 来设置宽度:实例<div class="w-25 bg-warning">宽度 25%</div><div class="w-50 bg-warning">宽度 50%</div><div class="w-75 bg-warning">宽度 75%</div><div class="w-100 bg-warning">宽度 100%</div><div class="mw-100 bg-warning">最大宽度 100%</div>

8、高度元素上使用 h-* 类 (.h-25,.h-50,.h-75,.h-100,.mh-100) 来设置高度:实例<div style="height:200px;background-color:#ddd"><div class="h-25 bg-warning">高度 25%</div><div class="h-50 bg-warning">高度 50%</div><div class="h-75 bg-warning">高度 75%</div><div class="h-100 bg-warning">高度 100%</div><div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>