当前博客:05-快码FOF中文编程layui教学-类名:lay-栅格大屏1-12

385 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

上一篇博客简单的了栅格化,那么我们了解一下layui的栅格类名:

1、layui的栅格同样是12等分,那么类名就是 lay-xxx1  到  lay-xxx12;

2、layui栅格一个列最多支持4种组合,分别是 大屏(桌面大型屏幕),中屏(桌面中型屏幕),小屏(平板),超小屏(手机);

3、栅格列的类名就是  lay-栅格(屏幕类型)(等分),例如:lay-栅格大屏2 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12;

用layui栅格布局写一个卡片布局,让他在大型屏幕6列,中型屏幕4列,小屏2列,超小屏1列,案例代码如下:

 代码展示效果如下;

<区块 类名="lay-栅格行">
	<区块 类名="lay-栅格大屏3 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
		<区块 类名="lay-红色背景">案例</区块>
	</区块>
	<区块 类名="lay-栅格大屏3 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
		<区块 类名="lay-红色背景">案例</区块>
	</区块>
	<区块 类名="lay-栅格大屏3 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
		<区块 类名="lay-红色背景">案例</区块>
	</区块>
	<区块 类名="lay-栅格大屏3 lay-栅格中屏3 lay-栅格小屏6 lay-栅格超小屏12">
		<区块 类名="lay-红色背景">案例</区块>
	</区块>
</区块>
Markup

PC:

平板:

移动端:

点击此处跳转案例下载:点击下载lay-栅格类名实例

05-快码FOF中文编程layui教学-类名:lay-栅格大屏1-12