Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
响应式布局
概念：对不同屏幕尺寸做出响应，并进行相应布局
原理：使用媒体查询设置不同的断点，进行不同css布局响应
优点：一个网站可以兼容多种终端，不需要重复开发
缺点：工作量大、代码累赘、加载时间长、效率低、冗余代码较多
适用场景：结构比较简单，展示型网站
不适用场景：交互较多，功能性的网站不适用
定义：就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕 | <768px |
| 小屏设备（手机） | >=768px~<992px |
| 中等屏幕（平板） | >=992px~<1200px |
| 宽屏设备 | >=1200px |
栅格系统：栅格是响应式布局的一种实现方式，将页面栅格化，一般将水平划分为12列，根据媒体查询监听缩放，决定元素占用几列：
container提供容器
row是为了清除浮动，至于为什么要清楚浮动和怎样清楚浮动，可以参考这里：链接
实现方式：
利用float：left属性，控制子元素的浮动、挤压、排列。
利用flex布局，实现主轴wrap挤压换行排列
//示例调用代码
<div class="container">
<div class="row">
<div class="col-1">1</div>
<div class="col-1">2</div>
<div class="col-1">3</div>
<div class="col-1">4</div>
<div class="col-1">5</div>
<div class="col-1">6</div>
<div class="col-1">7</div>
<div class="col-1">8</div>
<div class="col-1">9</div>
<div class="col-1">10</div>
<div class="col-1">11</div>
<div class="col-1">12</div>
</div>
</div>
五个断点的class属性，代表不同屏幕下的适配方式：
col-：xs(超小屏): < 576px
col-sm-: sm(小屏幕): 576px(含) - 768px
col-md-: md(中屏幕): 768px(含) - 992px
col-lg-: lg(大屏幕): 992px(含) - 1200px
col-xl-: xl(超大屏幕): > 1200px(含)
col-1：就代表超小屏幕下占据1列
col-2：就代表超小屏幕下占据2列
col-12：就代表这个元素在超小品谷下占据一整行
col-sm-1：就代表小屏幕下占据1列
col-sm-2：就代表小屏幕下占据2列
就近原则：如果屏幕是在xl中，就会先找自己自己对应的col-xl-样式，如果没有，就往下接着查找col-lg-样式，直到找到为止。
其他属性：
col-md-offset-4: 中等屏幕偏移4列
col-md-push-4：中等屏幕向右偏移4列
col-md-pull-4：中等个屏幕向左偏移4列
d-xs-none d-md-block：xs不显示，md显示
栅格系统CSS部分实现代码：
.container {
width: 100%;
margin: 0 auto;
}
/* 写的时候从小到大写，样式优先级问题，如果满足md，就会覆盖sm */
.container {
width: 100%;
margin: 0 auto;
}
/* 写的时候从小到大写，样式优先级问题，如果满足md，就会覆盖sm */
/* sm */
@media (min-width: 576px){
.container{
width: 540px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
float: left;
}
.col-1{
width: 8.333333%;
}
.col-2{
width: 16.666666%;
}
.col-3{
width: 25%;
}
.col-4{
width: 33.333333%;
}
.col-5{
width: 41.666666%;
}
.col-6{
width: 50%;
}
.col-7{
width: 58.333333%;
}
.col-8{
width: 66.666666%;
}
.col-9{
width: 75%;
}
.col-10{
width: 83.333333%;
}
.col-11{
width: 91.666666%;
}
.col-12{
width: 100%;
}
}
/* md */
@media (min-width: 768px){
.container{
width: 720px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
float: left;
}
.col-md-1{
width: 8.333333%;
}
.col-md-2{
width: 16.666666%;
}
.col-md-3{
width: 25%;
}
.col-md-4{
width: 33.333333%;
}
.col-md-5{
width: 41.666666%;
}
.col-md-6{
width: 50%;
}
.col-md-7{
width: 58.333333%;
}
.col-md-8{
width: 66.666666%;
}
.col-md-9{
width: 75%;
}
.col-md-10{
width: 83.333333%;
}
.col-md-11{
width: 91.666666%;
}
.col-md-12{
width: 100%;
}
}
/* lg */
@media (min-width: 992px){
.container{
width: 960px;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
float: left;
}
.col-lg-1{
width: 8.333333%;
}
.col-lg-2{
width: 16.666666%;
}
.col-lg-3{
width: 25%;
}
.col-lg-4{
width: 33.333333%;
}
.col-lg-5{
width: 41.666666%;
}
.col-lg-6{
width: 50%;
}
.col-lg-7{
width: 58.333333%;
}
.col-lg-8{
width: 66.666666%;
}
.col-lg-9{
width: 75%;
}
.col-lg-10{
width: 83.333333%;
}
.col-lg-11{
width: 91.666666%;
}
.col-lg-12{
width: 100%;
}
}
/* xl */
@media (min-width: 1200px){
.container{
width: 1140px;
}
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12{
float: left;
}
.col-xl-1{
width: 8.333333%;
}
.col-xl-2{
width: 16.666666%;
}
.col-xl-3{
width: 25%;
}
.col-xl-4{
width: 33.333333%;
}
.col-xl-5{
width: 41.666666%;
}
.col-xl-6{
width: 50%;
}
.col-xl-7{
width: 58.333333%;
}
.col-xl-8{
width: 66.666666%;
}
.col-xl-9{
width: 75%;
}
.col-xl-10{
width: 83.333333%;
}
.col-xl-11{
width: 91.666666%;
}
.col-xl-12{
width: 100%;
}
}
.row{
}