• Layout 布局
    • 基础布局
    • 分栏间隔
    • 混合布局
    • 分栏偏移
    • 对齐方式
    • 响应式布局
    • Row Attributes
    • Col Attributes

    Layout 布局

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

    基础布局

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

    Layout 布局 - 图1

    分栏间隔

    分栏之间存在间隔。

    Layout 布局 - 图2

    混合布局

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

    Layout 布局 - 图3

    分栏偏移

    支持偏移指定的栏数。

    Layout 布局 - 图4

    对齐方式

    对分栏进行灵活的对齐。

    Layout 布局 - 图5

    响应式布局

    参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：xs、sm、md和lg。

    Layout 布局 - 图6

    Row Attributes

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

    Col Attributes

    参数说明类型可选值默认值
    span栅格占据的列数，必选参数number——
    offset栅格左侧的间隔格数number—0
    push栅格向右移动格数number—0
    pull栅格向左移动格数number—0
    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