描述
网格模块提供了基于灵活的12列网格构建布局的类,具有自动边距,并使用额外的类使布局能够在较小的设备上正确折叠。
使用
网格应该由包装器元素和类组成ipsGrid,以及应用了适当大小类的直接子体(请参见下文)。例如:
Span 3Span 3Span 4Span 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_collapseTablet或ipsGrid_折叠耳机到包装器元素的类列表,如下所示:
类=“ipsGrid ipsGrid_collapsePhone”>...
报告指南