跳转到内容

布局:网格

描述

网格模块提供了基于灵活的12列网格构建布局的类,具有自动边距,并使用额外的类使布局能够在较小的设备上正确折叠。

使用

网格应该由包装器元素和类组成ipsGrid,以及应用了适当大小类的直接子体(请参见下文)。例如:

Span 3
Span 3
Span 4
Span 2

这将渲染为:

跨度3
跨度3
跨度4
跨度2

网格类ipsGrid_span1通过ipsGrid_span12可用于不同的列大小。

包装网格项

网格中的元素将自动整齐地换行到新行,提供网格中的每个项使用相同的跨度宽度和高度,而无需手动创建新的行结构。例如:

“ipsGrid”>“ipsGrid_span6”>跨度6
“ipsGrid_span6”>跨度6
“ipsGrid_span6”>跨度6
“ipsGrid_span6”>跨度6
跨度6
跨度6
跨度6
跨度6

对于网格,您的项目可能在高度或宽度上有所不同,请考虑ips.ui.grid小部件代替。

响应性

要使网格布局在较小的设备上塌陷,请添加ipsGrid_collapseTabletipsGrid_折叠耳机到包装器元素的类列表,如下所示:

“ipsGrid ipsGrid_collapsePhone”>...


报告指南

×
×
  • 创建新的…
Baidu