Bootstrap 4 基础教程Bootstrap 4 安装Bootstrap 4 基本框架Bootstrap 4 网格系统Bootstrap 4 文字排版Bootstrap 4 文本颜色Bootstrap 4 背景颜色Bootstrap 4 表格Bootstrap4 图像效果Bootstrap 4 超大屏幕 ( Jumbotron )Bootstrap 4 信息提示框Bootstrap 4 按钮Bootstrap 4 按钮组Bootstrap4 徽章 ( Badges )Bootstrap4 进度条Bootstrap 4 分页Bootstrap 4 面包屑导航Bootstrap 4 列表组Bootstrap 4 卡片组件Bootstrap 4 下拉菜单Bootstrap 4 折叠组件Bootstrap 4 手风琴Bootstrap 4 导航组件Bootstrap 4 导航栏Bootstrap 4 选项卡组件Bootstrap 4 胶囊导航组件Bootstrap 4 表单Bootstrap 4 表单控件Bootstrap4 轮播组件Bootstrap 4 模态框Bootstrap 4 提示框Bootstrap 4 弹出框Bootstrap 4 自动更新导航插件Bootstrap 4 小工具
Bootstrap 4 小工具
Bootstrap 4 提供了一些小工具，用于实现各种常见的效果，比如边框、边框颜色等
边框
.border 和 border-0 等可以添加边框或者移除边框
<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>
边框颜色
.border-* ( * 表示颜色名 ) 可以用来设置边框的颜色
<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>
圆角边框设置
.rounded 和 .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>
浮动
- .float-right 用于设置元素右浮动
- .float-left 设置元素左浮动
- .clearfix 类用于清除浮动
<div class="clearfix">
<span class="float-left">左浮动</span>
<span class="float-right">右浮动</span>
</div>
响应式浮动
.float-*-left 和 float-*-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>
居中对齐
.mx-auto 用于设置居中对齐
<div class="mx-auto bg-warning" style="width:150px">居中显示</div>
宽度
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>
高度
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>