Layui的布局 —— 栅格系统

Layui插件：
今天要说的是在Visual Studio 2015开发中会用到的一个很重要插件 – Layui插件。
Layui插件中有很多功能，今天就介绍最常用的几个，让大家认识Layui。

1. Layui的布局 —— 栅格系统：
   栅格布局规则：
2. 采用 layui-row 来定义行，如：
3. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
   1.变量md 代表的是不同屏幕下的标记（可选值见下文）
   2.变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
   3.如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
   3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小 屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
   4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
   5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！
   

以上代码效果：

这是最简单的栅格系统，接下来还有一些要知道的知识点。
2.响应式规则：
栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理

3.列偏移：
对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度

以上代码效果：

注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

4.栅格嵌套：
理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子：

以上代码效果：

这些就是简单栅格系统的知识点。因知识点太多，在这里列举的知识点并不全面，想要详细的知识点可以到Layui官网上进行查找。