layUI学习第四日：layUI布局系列一

1.栅格布局规则

　　1.1 layui-row定义行，如：<div class="layui-row"></div>

　　1.2 layui-col-md*这样的预设来定义列，如：<div class="layui-col-md9"></div>，定义一组列（column），且放在行（row）内。

　　　　变量md 代表的是不同屏幕下的标记，列可以同时出现最多四种不同的组合。

　　　　分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）

　　1.3 变量* 代表的是该列所占用的12等分数，可选值为 1 - 12。如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

2.响应式规则

3.响应式公共类

4. 布局容器

　　4.1 将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

　　4.2 将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应。

5.列间距

　　通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。预设了 12 种不同尺寸的边距。

　　layui-col-spaceX（X的值可为：1、3、5、8、10、12、15、18、20、22、28、30），X表示列之间间隔 Xpx。

　　如：<div class="layui-row layui-col-space10"></div>表示列之间的间距为10