1、划分layui区域
- layui-container：layui框架的容器，作用类似于flex布局的容器。
-
<div class="layui-container">// 在网页上划分一个区域，该区域专门使用layui的布局模块 </div>在layui框架中，任何行上方不允许存在浮动元素。
1.1、Layui的列元素
先使用
class="layui-container"在网页上划分出一个区域，该区域专门使用layui的布局模块。
Layui框架中采用class="layui-row"去在layui的布局模块中新建一个行，然后使用layui-col这样的预设类来定义一组列(column)，并且放在行内。layui-col的后面还需要跟上两组参数，具体格式如下： - layui-col-媒体类型+列所占的宽度比例：
媒体类型：分别是xs(超小屏幕，如手机)、sm(小屏幕，如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)，以呈现更加灵活的布局。
列所占的宽度比例：代表的是该列所占用的12等分，可选值为1~12，如果多个列的“等分数值”总和等于12，则刚好满行排列，如果大于12，多余的将自动另起一行。 -
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>栅格系统</title><link rel="stylesheet" href="text/css" href="layui-v2.6.8/layui/css/layui.css"></head><body><div class="layui-container"> <div class="layui-row"><div class="layui-col-md9" style="background-color: #009688;">12份中占9份</div><div class="layui-col-md3" style="background-color: #00FF00;">12份中占3份</div></div></div></body> </html>1.2、定义layui区域不同设备的列布局
-
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用 栅格布局</title><link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/><script type="text/javascript" src="layui-v2.6.8/layui/layui.js"></script><style type="text/css">/* .layui-container {height: 50vh;border: 1px solid #ccc;} *//* .layui-row > div {height: 50px;line-height: 50px;background: slateblue;} */</style></head><body><div class="layui-container"><div class="layui-row"><!--中等桌面屏幕一行排列 | 平板屏幕两行排列--><!-- <div class="layui-col-md3 layui-col-sm6" style="background-color: #009688;">数据内容</div><div class="layui-col-md3 layui-col-sm6" style="background-color: #009688;">数据内容</div><div class="layui-col-md3 layui-col-sm6" style="background-color: #00F7DE;">数据内容</div><div class="layui-col-md3 layui-col-sm6" style="background-color: #01AAED;">数据内容</div>--> <div class="layui-col-sm3" style="background-color: #009688;">beijing</div><div class="layui-col-sm3" style="background-color: #00F7DE;">shanghai</div><div class="layui-col-sm3" style="background-color: #009688;">beijing</div><div class="layui-col-sm3" style="background-color: #01AAED;">shanghai</div> </div></div></body> </html>效果如下图所示:
-
1.3、layui容器区域内元素的显示类型的变化
元素的宽度，列数，显示类型等变化都是基于响应式网站设计理念而来，之所以UI框架加入这一特性，目的是为了能够使UI框架的适用范围更大。
- 显示为块元素：
-
layui-show-md-block - 显示为行内元素：
-
layui-show-md-inline - 显示为行内块元素：
-
layui-show-md-inline-block - 元素消失：
layui-hide-md1.4、layui-col-space列间距：容器区域内多列内容之间的间距设置
格式：
layui-col-space$$为数字，代表每一列内容的间距，从本质上讲：这个间距是加在了每一个layui-col的左右内边距上的像素。<div class="layui-container"> <div class="layui-row layui-col-space10"><div class="layui-col-sm4"><div class='dem'>内容</div></div><div class="layui-col-sm4"><div class='dem'>内容</div></div><div class="layui-col-sm4"><div class='dem'>内容</div></div></div></div>1.4、layui-col-屏幕类型-offset$：列偏移，Layui容器区域内的某一列向右偏移列数
格式：
layui-col-屏幕类型-offset$$为数字，代表该列内容距离左边内容的偏移的列数
如果列宽+列偏移 > 12，那么自动换行，换到下一行的列如果具备偏移的性质，那么该偏移会依旧生效。 -
<div class="layui-container"><div class="layui-row"><div class="layui-col-sm4 " style="background-color: #00F7DE">法国</div><div class="layui-col-sm4 layui-col-sm-offset8" style="background-color: #01AAED">偏移8</div></div> </div>效果如下：
-
