一.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个列
BootStrap_day03
最新推荐文章于 2020-11-14 10:10:56 发布