Boostrap简介
Boostrap是一套基于 HTML、CSS 和 Javascript的的响应式前端框架。简单来说就是一套预先定义好的css文件和js文件，当我们需要使用时在html页面中用link标签引入我们需要的文件，然后使用即可。
Boostrap的使用
Boostrap的使用极其简单，我们只需要根据它定义好的类名，在我们要引入样式的标签上添加它给的类名就可以使用了。若默认样式不满足我们的需求，我们可以自己使用选择器更改对应属性。
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类：container类和container-fluid类，container-fluid类一般用于移动端页面开发。这个.container容器被预定好响应式样式，当我们定义这个类时，引入的Boostrap文件会对其进行一系列初始化操作。
container和container-fluid的区别
container类
- 响应式布局的容器 固定宽度
- 大屏 ( >=1200px) 宽度定为 1170px
- 中屏 ( >=992px) 宽度定为 970px
- 小屏 ( >=768px) 宽度定为 750px
- 超小屏 (100%)
container-fluid类
- 流式布局容器百分百宽度
- 占据全部视口（viewport）的容器
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加， 系统会自动分为最多12列。
它是指将页面布局划分为等宽的列，然后通 过列数的定义来模块化页面布局。
当我们使用栅格系统时都是通过使用一系列row和column来进行布局操作。例如携程的移动端页面
这种布局我们可以用flex布局，也可用栅格系统快速制作。
container里页面已经被分为十二等份，而这个页面中我们可以很容易知道，先将页面份为三列，再在第二列与第三列中分为上下两行。栅格系统中我们 html 可以这样写
<div class="row">
//col-sm-4 即让我们三个盒子各自分到了四份空间
<div class="col-sm-4 column1"></div>
<div class="col-sm-4 column2"></div>
<div class="col-sm-4 column3"></div>
</div>当我们需要进行行切分时，html 中可以这样写
//row-cols-2 让我们的盒子再次按行切分为两行
<div class="row">
//col-sm-4 即让我们三个盒子各自分到了四份空间
<div class="col-sm-4 column1"></div>
<div class="col-sm-4 row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<div class="col-sm-4 row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>如上我们在row盒子里可以得到一个 3 * 2 布局