一、shrink-to-fit=no
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
这行代码的作用可以让网页的宽度自动适应手机屏幕的宽度，但是多了shrink-to-fit=no，主要是为了兼容iOS9。
二、栅格
.container(固定宽度)、 .container-fluid (全屏宽度)
Bootstrap4 网格系统规则:
-
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
-
使用行
.row来创建水平的列组。 -
内容需要放置在列中，并且只有列可以是行的直接子节点。
-
列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
| 类前缀 | 设备 | 大小 |
|---|---|---|
.col- |
所有设备 | <576px |
.col-sm- |
平板 | ≥576px |
.col-md- |
桌面显示器 | ≥768px |
.col-lg- |
大桌面显示器 | ≥992px |
.col-xl- |
超大桌面显示器 | ≥1200px |
三、偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
四、表格
| 类前缀 | 描述 |
|---|---|
.table |
基础表格 |
.table-bordered |
边框表格 |
.table-hover |
鼠标悬停状态表格 |
.table-striped |
条纹表格 |
.table-responsive |
响应式表格 |
.table-sm |
较小的表格 |
表格颜色（表头、行、整个表格） 类前缀| 描述 | |--|--| |.table-primary |蓝色: 指定这是一个重要的操作| |.table-success| 绿色: 指定这是一个允许执行的操作 .table-danger |红色: 指定这是可以危险的操作 .table-info| 浅蓝色: 表示内容已变更 .table-warning |橘色: 表示需要注意的操作 .table-active| 灰色: 用于鼠标悬停效果 .table-secondary| 灰色: 表示内容不怎么重要 .table-light |浅灰色，可以是表格行的背景 .table-dark |深灰色，可以是表格行的背景
| 类前缀 | 描述 |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
五、图像形状
| 类前缀 | 描述 |
|---|---|
.rounded |
圆角图片 |
.rounded-circle |
椭圆图片 |
.img-thumbnail |
缩略图 |
.img-fluid |
响应式图片(设置了 max-width: 100%; 、 height: auto;) |
.float-left、.float-right |
图片左对齐、图片右对齐 |
六、按钮
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
<!-- 按钮设备边框 -->
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>
<!-- 不同大小的按钮 -->
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
<!-- 块级按钮 -->
<button type="button" class="btn btn-primary btn-block">按钮 1</button>
七、小工具
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>
<!-- 边框颜色 -->
<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>
<!-- 边框圆角设置-->
<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>
对齐方式
| 类前缀 | 描述 |
|---|---|
.mx-auto |
元素居中 |
.ml-auto |
元素居右 |
.mr-auto |
元素居左 |
宽度/高度
<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 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>
元素之间的距离
.m-1 // margin: .25rem!important;
.m-2 // margin: .5rem!important;
.m-3 // margin: 1rem!important;
.m-4 // margin: 1.5rem!important;
.m-5 // margin: 3rem!important;
.p-1 // padding: .25rem!important;
.p-2 // padding: .5rem!important;
.p-3 // padding: 1rem!important;
.p-4 // padding: 1.5rem!important;
.p-5 // padding: 3rem!important;
八、显示和隐藏
hidden-xs = d-none d-sm-block
hidden-sm hidden-xs = d-none d-md-block
hidden-md hidden-sm hidden-xs = d-none d-lg-block
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-block
来源：oschina
链接：https://my.oschina.net/u/3982771/blog/4257335