Layui布局

开发工具与关键技术：VS与MVC
作者：刘华叶
撰写时间：2019年6月5日

我们在做项目的过程中，总有许多页面需要搭建，实现任何功能，你都要去搭建页面，所以，这个布局就显得很重要了，一个项目做得好不好，页面的布局是很重要的，很多人都觉的无所谓，只要功能实现就行了，但是，如果你的功能做的好，页面也搭的好，那你就可以达到更高的境界，如果你的页面布局要是可以给人焕然一新的感觉，那肯定是可以加分的，反之，页面搭的不好，那肯定就没什么看点，所以我们要重视一下这个页面布局。
这个布局我们都是用layui布局，layui 的栅格系统采用业界比较常见的 12 等分规则。

一、 栅格布局规则：

1. 我们都是采用layui-row来定义行，如：
2. 采用类似layui-col-md这样的预设类来定义一组列（column）,且放在行（row）内，其中：
   变量md代表的是不同屏幕下的标记
   一行代表的是该列所占用的12等分数（如6/12），选值可以为1-12，按项目需求设置
   如果多个列的等分数值总和等于12，则刚好满行排列，如果大于12，多余的列将自动另起一行。
   这些都是常见的一些布局规则。

常规布局（以中型屏幕桌面为例）：

你的内容 9/12

你的内容 3/12

当然，针对不同的屏幕，我们可以设置不同的属性：
然列可以同时出现最多四种不同的组合，分别是：xs(超小屏幕，如手机)，sm(小屏幕，比如平板)，md(桌面中等屏幕)，lg(桌面大型屏幕)，已呈现更加动态灵活的布局。
二，删格嵌套：
你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。

内部列

内部列

内部列

就像这样嵌套就可以了。 其实布局并不难，布局就分为以下几点： 1，删格布局规则 2，响应式规则 3，响应式公共类 4，布局容器 5，列间距 6，列偏移 7，栅格嵌套 8，IE8/9兼容方案 掌握好这些知识点，布局就很简单了。