说明：
bootstrap的强大之处在于实现响应式布局（学习栅格系统）
栅格化布局：子元素在设置宽度的时候不再以px %作为单位
而是以当前这一行的总数是几个栅格 子元素占据当前这一行栅格的几等份
全局CSS样式---栅格系统
栅格系统就是来描述设置当前子元素在指定屏幕下 占据当前屏幕默认12等份中的n(1-12)等份
- 1、布局容器
1、布局容器(为栅格系统包裹一个.container)：container container-fluid
(注意这两种容器不能嵌套使用)
.container 固定宽度的
结论：container 容器是固定宽度的
sw设备宽度 w容器宽度
sw>1200 w1170px
sw 992-1200 w970px
sw 768-992 w750px
sw<768 w100%
.container-fluid 全屏的
结论： 无论何种设备 w容器宽度始终为100% 全屏
demo（如何设置布局容器）
<style>
.container {
background-color: pink;
height: 200px;
}
.container-fluid {
background-color: skyblue;
height: 200px;
}
</style>
<body>
<div class="container">container容器始终是是固定宽度的</div>
<div class="container-fluid">container-fluid容器始终是全屏的</div>
</body>
2、栅格系统（流式栅格布局）
2、流式栅格系统（响应式的移动设备优先）
放置栅格系统是从上到下从左到右的，当前这行放不下 会换行显示。
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为12列（也可以定制很多列）。
--用于通过一系列的行与列的组合来创建页面布局
布局容器：container/container-fluid
栅格：一行row里的一个列col就是一个栅格 一个栅格默认占据1/12
我们可以自定义一个栅格占据一行内的多少份
3、创建栅格系统
3、创建栅格系统
a)添加容器.container/.container-fluid
b)添加.row
c)添加子元素，同时设置栅格样式列（通过设置类名的方式来设置）
d)在子元素中添加具体内容
demo1 （如何设置栅格布局）
<style>
.container {
height: 200px;
}
.container .row {
height: 100%;
}
.container .row>div {
/* width: 100%; */
height: 100%;
background-color: pink;
border: 2px solid red;
box-sizing: border-box;
}
</style>
<body>
<!--
结论:container 是固定宽度的
sw设备宽度 w容器宽度 前缀
sw>1200 w1170px lg 大屏幕
sw 992-1200 w970px md 中屏幕
sw 768-992 w750px sm 小屏幕（平板）
sw<768 w100% xs 超小屏幕
-->
<!-- demo1 容器 -->
<div class="container">
<!-- row -->
<div class="row">
<!-- 列 通过样式(预定义的类)的方式来创建 -->
<!-- col-xs-4 设置当前div在xs屏幕下占据当前屏幕12等份中的4等份 1/3 一行放三个 -->
<!-- 流式布局 一行放三个123在第一行 放不下的放下一行 45在下一行 -->
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>
<div class="col-xs-4">5</div>
</div>
</div>
</body>
demo1流式布局
demo2 向上兼容 向下覆盖 通过类名设置多个屏幕的不同样式
<!-- demo2 向上兼容 向下覆盖 通过类名设置多个屏幕的不同样式-->
<body>
<!--
sw设备宽度 w容器宽度 前缀 希望一个元素占据等份 类名
sw>1200 w1170px lg 大屏幕 3等份 col-lg-3
sw 992-1200 w970px md 中屏幕 4等份 col-md-4
sw 768-992 w750px sm 小屏幕（平板） 6等份 col-sm-6
sw<768 w100% xs 超小屏幕 12等份 col-xs-12
-->
<!-- 希望在xs屏幕下占据整个这一行12等份 -->
<!--col-xs-12 我们只设置了最小屏幕的样式没有设置其它屏幕的样式
会向上兼容所有尺寸都分为12/12 -->
<!--col-sm-6 当我们设置了宽度更大的屏幕的样式的时候，会向下覆盖，将较小屏幕的样式覆盖 -->
<!-- col-md-6 当我们设置了宽度更大的屏幕的样式的时候，会向下覆盖，将较小屏幕的样式覆盖-->
<div class="container">
<div class="row">
<!-- 1.col-xs-12 即在超小屏幕xs的时候一个div占据12等份中的12份1/1 -->
<!-- 2.col-sm-6 即在小屏幕sm的时候一个div占据12等份中的6等份1/2
所以在该尺寸下1个div只会占一行的一半
2个div会并排占据一行 各占一行的6/12即1/2
-->
<div class="col-xs-12 col-sm-6">demo2</div>
<div class="col-xs-12 col-sm-6">demo2</div>
</div>
</div>
</body>
col-sm-6,会覆盖掉col-xs-12 向下覆盖,所以会选择col-sm-6
col-xs-12 向上兼容 当小于768选择col-xs-12 更大的屏幕也是兼容col-xs-12分为12/12 （当样式只存在xs-12而没有更大尺寸的时候）
向上兼容向下覆盖原理
向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内
向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖
书写建议：
1.如果是判断最小值（min-width），应该从小到大写
2.如果是判断最大值（max-width），应该从大到小写