栅格布局规则
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）元素中放入你自己的任意元素填充内容，完成布局！
移动设备、平板、桌面端的不同表现：
<div class="layui-container"> 常规布局（以中型屏幕桌面为例）： <div class="layui-row"> <div class="layui-col-md9"> 你的内容 9/12 </div> <div class="layui-col-md3"> 你的内容 3/12 </div> </div> 移动设备、平板、桌面端的不同表现： <div class="layui-row"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 移动：4/12 | 平板：12/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 移动：4/12 | 平板：7/12 | 桌面：8/12 </div> <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 移动：4/12 | 平板：5/12 | 桌面：4/12 </div> </div> </div>
栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理
超小屏幕(手机<768px) 小屏幕(平板≥768px) 中等屏幕(桌面≥992px) 大型屏幕(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
标记 xs sm md lg
列对应类
* 为1-12的等分数值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
总列数 12
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列
三、响应式公共类：
类名（class） 说明
layui-show-*-block 定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
layui-show-*-inline 定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block 定义不同设备下的 display: inline-block; * 可选值同上
layui-hide-* 定义不同设备下的隐藏类，即： display: none; * 可选值同上
四、布局容器：
将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
<div class="layui-container"> <div class="layui-row"> …… </div> </div>
当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应
<div class="layui-fluid"> …… </div>
五、列间距：
通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：
layui-col-space1 列之间间隔 1px
layui-col-space3 列之间间隔 3px
layui-col-space5 列之间间隔 5px
<div class="layui-row layui-col-space10"> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> </div>
六、列偏移：
对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度
<div class="layui-row"> <div class="layui-col-md4"> 4/12 </div> <div class="layui-col-md4 layui-col-md-offset4"> 偏移4列，从而在最右 </div> </div>
请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
七、栅格嵌套：
理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。
<div class="layui-row layui-col-space5"> <div class="layui-col-md5"> <div class="layui-row grid-demo"> <div class="layui-col-md3"> 内部列 </div> <div class="layui-col-md9"> 内部列 </div> <div class="layui-col-md12"> 内部列 </div> </div> </div> <div class="layui-col-md7"> <div class="layui-row grid-demo grid-demo-bg1"> <div class="layui-col-md12"> 内部列 </div> <div class="layui-col-md9"> 内部列 </div> <div class="layui-col-md3"> 内部列 </div> </div> </div> </div>
八、让IE8/9兼容栅格：
事实上IE8和IE9并不支持媒体查询（Media Queries），但你可以使用下面的补丁完美兼容！该补丁来自于开源社区：
<!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
将上述代码放入你页面 <body> 标签内的任意位置
按钮
向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。
内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
<button class="layui-btn">一个标准的按钮</button> <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
主题 组合
原始 class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"
尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
混用 组合
大型百搭 class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色 class="layui-btn layui-btn-warm"
小型警告 class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled"
圆角
默认 class="layui-btn layui-btn-radius"
图标
<button class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> </button>
按钮组
将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配
<div class="layui-btn-group"> <button class="layui-btn">增加</button> <button class="layui-btn">编辑</button> <button class="layui-btn">删除</button> </div>
按钮容器
尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
<div class="layui-btn-container"> <button class="layui-btn">按钮一</button> <button class="layui-btn">按钮二</button> <button class="layui-btn">按钮三</button> </div>
颜色
https://www.layui.com/doc/element/color.html
图标
https://www.layui.com/doc/element/icon.html
表单
在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
行区块结构
下述是基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。
<div class="layui-form-item"> <label class="layui-form-label">标签区域</label> <div class="layui-input-block"> 原始表单元素区域 </div> </div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类
下拉选择框
<select name="city" lay-verify=""> <option value="">请选择一个城市</option> <option value="010">北京</option> <option value="021">上海</option> <option value="0571">杭州</option> </select>
带搜索的选择框
通过设定属性 lay-search 来开启搜索匹配功能
<select name="city" lay-verify="" lay-search> <option value="010">layer</option> <option value="021">form</option> <option value="0571" selected>layim</option> …… </select>
属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持
复选框
默认风格：
<input type="checkbox" name="" title="写作" checked> <input type="checkbox" name="" title="发呆"> <input type="checkbox" name="" title="禁用" disabled>
原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked> <input type="checkbox" name="" title="发呆" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值，否则选中时返回的就是默认的on
组装行内表单
class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内
通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。我们的Fly社区用的就是这个风格。
<form class="layui-form layui-form-pane" action=""> 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如： <div class="layui-form-item" pane> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> </form>