BootStrap_day03

一.CSS全局样式-栅格布局
1.基本结构
容器：.container/.container-fluid
行：.row
列：.col
2.针对不同的屏幕需要使用不同的列，如
大屏幕：4/12 三列 左中右
中等屏幕：6/12 两列 左右
小屏幕：12/12 一列
.col-xl-1/2/3/4…/12
.col-lg-1/2/3/4…/12
.col-md-1/2/3/4…/12
.col-sm-1/2/3/4…/12
Bootstrap中屏幕的尺寸划分：
(1)xl:Extra large 超大屏幕
w>=1200px;
(2)lg:large 大pc屏幕
1200px>w>=992px
(3)md:medium 中等pc屏幕
991px>w>=768px
(4)sm:small 小屏幕
767px>w>=576px
(5)xs:Extra small 超小屏幕
576px>w
注意：
col不添加数字时，自动布局同一行的每个列的宽度占比相等，如：两个col，各占50%，三个各占33.3%，可以用col设置布局时的等宽效果。
3.不同屏幕下列的适应性问题
col-xl-* 只能在xl屏幕下有效
col-lg-* 在lg/xl屏幕下都有效
col-md-* 在md/lg/xl屏幕下都有效
col-sm-* 在sm/md/lg/xl屏幕下都有效
总结：列可以在当前屏幕以及更大的屏幕下有效。
4.可以使用"列偏移"实现指定列以及其后的列向右偏移效果
列偏移通过offset--类来设置。
第一个号可以是sm/md/lg/xl表示不同屏幕尺寸的下的设置。
第二个号可以是1到11的数字，这些类会把一个列的左外边距增加*列
ex:
.offset-md-4 在中等屏幕下把当前列往右偏移了4个列