Layout 布局

通过基础的 24 分栏,迅速简便地创建布局。

基础布局

使用单一分栏创建基础的栅格布局。

Layout 布局 - 图1

分栏间隔

分栏之间存在间隔。

Layout 布局 - 图2

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

Layout 布局 - 图3

分栏偏移

支持偏移指定的栏数。

Layout 布局 - 图4

对齐方式

对分栏进行灵活的对齐。

Layout 布局 - 图5

响应式布局

参照了 Bootstrap 的 响应式设计,预设了四个响应尺寸:xssmmdlg

Layout 布局 - 图6

Row Attributes

参数说明类型可选值默认值
gutter栅格间隔number0
type布局模式,可选 flex,现代浏览器下有效string
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-betweenstart
alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
tag自定义元素标签string*div

Col Attributes

参数说明类型可选值默认值
span栅格占据的列数,必选参数number
offset栅格左侧的间隔格数number0
push栅格向右移动格数number0
pull栅格向左移动格数number0
xs<768px 响应式栅格数或者栅格属性对象number/object (例如: {span: 4, offset: 4})
sm≥768px 响应式栅格数或者栅格属性对象number/object (例如: {span: 4, offset: 4})
md≥992 响应式栅格数或者栅格属性对象number/object (例如: {span: 4, offset: 4})
lg≥1200 响应式栅格数或者栅格属性对象number/object (例如: {span: 4, offset: 4})
tag自定义元素标签string*div