layui admin学习（001）

1）常用公共属性，即可以普遍运用于所有元素上的属性。

　　lay-submit：表单提交属性；定义一个触发表单提交的button，不用填写值

　　lay-filter=""：事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器

　　lay-skin = ""：定义相同元素的不同风格，如checkbox的开关风格

　　具体其它的共有属性，请查看具体文档

2）栅格系统：

　　①定义将容器<div class="layui-container"></div>,12等分；

　　②布局规则：　　

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

栅格系统的类结构：layui-container(容器)---->layui-row(容器内的行)---->layui-col-**(行内的列)

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

<div class="layui-fluid">

</div>

4）列间距：layui-col-space* 2~30的所有偶数，1,5,15,25px奇数间隔。放在行的class中：

　　<div class="layui-row layui-col-space10">

　　　　<div class="layui-col-md4">

　　　　...

　　　　</div>

　　</div>

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

6）栅格嵌套：在列元素（layui-col-md*）中添加一个行元素（layui-row），文档自行了解

7）表单<form class="layui-form">

　　　　文本输入框：<div class="layui-form-item">

　　　　　　　　　　　　<div class="layui-input-block">

　　　　　　　　　　　　　　<label class="layui-form-label">输入框</label>

<input  type="text"  name="title"  required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

　　　　　　　　　　　　</div>

　　　　　　　　　　</div>

8)

<!--带搜索的下拉框-->
<div class="layui-form-item">
<div class="layui-input-block">
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
……
</select>
</div>
</div>