Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作基于 HTML、CSS、 JavaScript 开发的简洁、直观、强悍的前端开发框架
栅格系统
（1）.container 类：用于固定宽度并支持响应式布局的容器。（两边会有一定的留白）
（2）.container-fluid 类：用于 100%宽度，占据全部视口（viewport）的容器
自动布局，宽度自适应（平分）（这种方式平分后宽度660的时候会挤下去）
<div class="w-100">换行</div> 这个div换行再平分 <div class="row"> <div class="col r">我是第一列</div> <div class="col b">我是第二列</div> <div class="col g">我是第三列</div> <div class="w-100">换行</div> <div class="col b">我是第二列</div> <div class="col g">我是第三列</div> </div>
在不同的设备上响应式布局
sm<md<lg<xl
<div class="row"> <div class="col-sm-6 col-md-3 col-lg-2 col-xl-1 r">我是第一列</div> <div class="col-sm-6 col-md-3 col-lg-2 col-xl-1 b">我是第一列</div> <div class="col-sm-6 col-md-3 col-lg-2 col-xl-1 g">我是第一列</div> <div class="col-sm-6 col-md-3 col-lg-2 col-xl-1 b">我是第一列</div> </div>
网格选项
虽然Bootstrap使用ems或rems来定义大多数大小，但pxs用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不随字体大小而变化。
了解Bootstrap网格系统的各个方面如何在具有便捷表的多个设备上工作。
超小<576px 小≥576px 中等≥768px 大≥992px 超大≥1200px
最大容器宽度 无（自动） 540px 720像素 960像素 1140px
实用布局类
justify-content-center代表子代col水平居中
<div class="test1 row justify-content-center align-items-center"> <div class="col-auto"> 元素内容 </div> </div>
justify-content-between代表子代col会往两边分开
align-self-center代表单个子元素自己垂直居中
<div class="test2 row justify-content-between"> <div class="col-auto align-self-center"> 元素内容 </div> <div class="col-auto align-self-center"> 元素内容 </div> </div>
ml-auto代表向左远离(mr反之)
<div class="test3 row"> <div class="col-auto"> 元素内容 </div> <div class="col-auto ml-auto"> 元素内容 </div> </div>
img-fluid代表自适应的图片
<img src="/images/QQ图片20190626100534.png" class="img-fluid" />
多个DIV元素在一个容器水平居中 需要Bootstrap
父容器:<div class="row justify-content-md-center">
需要居中的元素:
间距一定距离居中
margin: 0px 40px;
全部间距相等居中
margin: 0px auto;
列偏移offset-md-4
<div class="row"> <div class="col-md-4 r">我是第一列</div> <div class="col-md-4 offset-md-4 b">我是第一列(向右偏移4列)</div> </div>
列排序(order后面的数字越小，排在越前面(如果这个列存在没有排列的，那他在原本的位置))order-md-9
<div class="row"> <div class="col-md-3 order-md-10 r">排序之后第1列</div> <div class="col-md-4 order-md-9 b">排序之后第2列</div> <div class="col-md-5 order-md-12 g">排序之后第3列</div> </div>
删除列间隙(文字将没有padding)
<div class="row no-gutters">
附有jquery的情况下
实时获取屏幕当前宽度
<script> $(function () { window.onresize = function () { var w = $("body").width(); $("#top").text("当前屏幕宽度" + w); } }) </script>
原文：https://www.cnblogs.com/lolojia/p/12957713.html