开发指南
基本使用
此栅格系统提供了320,480,720, 990,1200,1500等几乎所有主流分辨率场景的响应规则。
响应式栅格采用24列栅格体系和5分比实现,以满足2,3,4,5,6分比布局等多种情况。
固定栅格采用 20px 宽度作为单位栅格, 推荐使用9,10,12,14,16,18,24,但同时也提供了从1到30的所有栅格,也可根据需求定制固定栅格列。
响应式断点阈值为:xxs(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px)。
基于Flex实现,对 IE9 通过 display:table;
兼容实现,但 IE9 仅支持基本的响应式布局(详情请参考 API 和 DEMO 的说明)。
无障碍
默认 <Row>
和 <Col>
会加上 role="row"
和 role="gridcell"
, 但是为了完美的无障碍实现, 开发者还应该在外部容器加上 role="grid"
。示例代码如下:
<div role="grid">
<Row><Col span={6}>1</Col><Col span={6}>2</Col><Col span={6}>3</Col><Col span={6}>4</Col></Row>
<Row><Col span={6} offset={6}>1</Col><Col span={6} offset={6}>2</Col></Row>
</div>