Bootstrap4 小工具
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container">
<h2>边框</h2>
<p>使用 border 类可以添加或移除边框:</p>
<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>
</div>
<div class="container">
<div class="clearfix">
<span class="float-left">左浮动</span>
<span class="float-right">右浮动</span>
</div>
</div>
<div class="container">
<h2>响应式浮动</h2>
<p>重置浏览器大小查看效果。</p>
<p>我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:</p>
<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>
</div>
居中对齐
使用 .mx-auto 类来设置居中对齐
<div class="container">
<div class="mx-auto " style="width:150px">居中</div>
</div>
宽度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
<div class="container">
<h1>宽度设置小工具</h1><p>元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:</p>
<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>
</div>
<div class="container">
<h1>高度小工具</h1>
<p>元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:</p>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div>
</div>
</div>