.col-xs-超小屏幕 手机 (<768px),
.col-sm-小屏幕 平板 (≥768px),
.col-md-中等屏幕
.col-lg-桌面显示器 (≥992px)(栅格参数)
什么是栅格系统
栅格系统英文为 Grid Systems,也有翻译为网格系统。
定义:运用固定的格子,遵循一定的规则,进行页面的布局设计,使布局规范简洁有规则。
网页栅格
包括网页端和移动端,是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。
栅格基础七要素
最小单位
需要先定好界面的单位基础,后续内容元素和布局规则都是基于它整数倍递增。
网页端最小单位:10
移动端最小单位:3、4、5
列数/N
列数是界面总宽度设定好后,纵向等分成几列。
-
网页端:12列、24列(常用等分列数,当然不是固定的,需要根据自己的内容设定列数)
-
移动端:6列(常用等分列数)
-
大列宽/L
把界面总宽度等分成几列,每一列的宽度即为大列宽。
-
计算公式:L = W / N
-
大列宽包含:列宽和水槽
水槽/G
相邻两个列宽之间的间隔是水槽。
水槽宽度越大,页面留白和呼吸感会更好,反之则更紧凑。水槽可以将内容更规范的区分开来。
列宽/C
把界面总宽度等分成列,相邻两列之间的间隔(水槽)减去后就是列宽。
转载链接:https://www.jianshu.com/p/956065291d53