Layui布局和栅格系统
一.栅格系统
1. 栅格系统是一种布局方案,在 Layui 中一行最多分为 12 个栅格;
2. 支持移动手机、平板、中型和大型 PC 桌面的适配处理,方便响应式切换;
3. 定义栅格系统最外层 div 设置 class 为:.layui-container,此为布局容器;
4. 行的定义 div 设置 class 为:.layui-row,为了方便测试,可以加上背景色;
<div class="layui-container">
<div class="layui-row">
1
</div>
</div>
PS:从上面代码运行效果可以看出最大长度 1170px,而一行有两侧内边距 15px;
5. 如果我们想在这一行中,设置三个列可以使用 class 为:.layui-col-md4;
<div class="layui-row">
<div class="layui-col-md4">1</div>
<div class="layui-col-md4">2</div>
<div class="layui-col-md4">3</div>
</div>
PS:每列占 4 个栅格位,共 12 个铺满一行;md 表示中等 PC 桌面>=992 响应;
PS:在浏览器点击查看元素,可以发现,它是通过 CSS3 媒体查询来实现的;
超小屏幕
(手机<768px)
小屏幕
(平板≥768px)
中等屏幕
(桌面≥992px)
大型屏幕
(桌面≥1200px)
值 auto 750px 970px 1170px
*1-12 等分 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg* 6. 除了固定大小的布局容器之外,还有 100%流体的布局容器:.layui-fluid;
<div class="layui-fluid">
...
</div>
7. 想要实现列布局间距设置,可以使用:layui-col-space*(1-30);
<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-sm4">
<div class="layui-bg-blue a">1</div>
</div>
<div class="layui-col-sm4">
<div class="layui-bg-orange a">2</div>
</div>
<div class="layui-col-sm4">
<div class="layui-bg-green a">3</div>
</div>
</div>
</div>
PS:*号是 1,2,4,5,6,8,10...具体可以看代码提示,最终解析成:margin:-*px;
PS:.a 设置高度,让演示更清晰,不要直接设置 col 的父层,无法实现效果;
8. 如果要实现列偏移,可以使用.layui-col-sm-offset*,*表示一个栅格位;
<div class="layui-col-sm4 layui-col-sm-offset4">
PS:由于栅格位一行只有 12 列,需要计算好,超过后就会导致换行;