本文共 5352 字，大约阅读时间需要 17 分钟。

一、栅格系统

1、栅格布局规则

     1）采用 layui-row 来定义行，如：<div class="layui-row"></div>

     2）采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

     3）最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

2、布局容器

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

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

3、列间距

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

       如： <div class="layui-row layui-col-space3">

4、列偏移

       对列追加 类似 layui-col-xx-offset* 的预设类，从而让列向右偏移。如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度。

如：<div class="layui-col-md6 layui-col-md-offset2">

5、栅格嵌套

       在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。

    
       
           
   
   
    
    
        
     
移动设备、平板、桌面端的复杂组合响应式展现
    
    
    
    
        
     
            
      
       移动：6/12 | 平板：6/12 | 桌面：4/12
      
        
     
        
     
            
      
       移动：6/12 | 平板：6/12 | 桌面：4/12
      
        
     
        
     
            
      
       移动：4/12 | 平板：12/12 | 桌面：4/12
      
        
     
    
    
    
    
        
     
            
      
       移动：4/12 | 平板：7/12 | 桌面：6/12
      
        
     
        
     
            
      
                
       
                    
        
         嵌套12
        
                
       
                
       
                    
        
         嵌套4
        
                
       
            
      
        
     
    
    
   
   

    

二、表单

       在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

      依赖加载模块：form（注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

       class="layui-form layui-form-pane"  方框风格的表单,

       <div class="layui-form-item" pane> 对表单元素加方格 

       对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格

1、输入框

    required：注册浏览器所规定的必填字段

    lay-verify：注册form模块需要验证的类型

    class="layui-input"：layui.css提供的通用CSS类

    layui-input-block ：一个表单元素独占一行

    layui-input-inline ：一行可以放置多个表单元素

   
    
    
        
     
            
      输入框            
      
                
                   
      
        
     
        
     
            
      密码框            
      
                
                   
      
            
      
       辅助文字
      
        
     
        
     
            
      
                
       立即提交                
       重置            
      
        
     
    
    
   

  

2、下拉选择框

      属性 lay-search 来开启搜索匹配功能

      属性 selected 可设定默认项

      属性 disabled 开启禁用

分组下拉选择框见官网与联动下拉选择框（通过监听可实现）

   
            
    可搜索单行选择框            
    
                
                         请选择一个城市                    北京                    上海                    杭州                            
    
        
   

  

3、单选框

      属性 title 可自定义文本

      属性 disabled 开启禁用

      属性 checked 设定默认项

设置 value="xxx" 可自定义值，否则选中时返回的就是默认的on

   
            
    单选框            
    
                
                     
                     
                 
    
        
   

   

4、复选框

      属性 title 可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）

      属性 checked 可设定默认选中

      属性 lay-skin 可设置复选框的风格

设置 value="1" 可自定义值，否则选中时返回的就是默认的on

   
            
    单选框            
    
                
                     
                     
                     
                     
                     
                     
                     
                 
    
        
   

  

5、开关

      其实就是 checkbox 复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格

      属性 checked 可设定默认开

      属性 disabled 开启禁用

      属性 lay-text 可自定义开关两种状态的文本

   
            
    单选框            
    
                
                     
                     
                     
                 
    
        
   

  

6、文本域

      rows="2"  不起作用, 默认高度最小100px

   
            
    文本域            
    
                
                 
    
        
   

  

7、组装行内表单

      class="layui-inline"：定义外层行内

      class="layui-input-inline"：定义内层行内

   
            
    
                
     范围                
     
                    
                      
     
                
     
      -
     
                
     
                    
                      
     
            
    
        
   

  

三、   

元素属性

属性名	属性值	说明
title	任意字符	设定元素名称，一般用于checkbox、radio框
lay-skin	switch（开关风格） primary（原始风格）	定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
lay-ignore	任意字符或不设值	是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter	任意字符	事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
lay-verify	required（必填项） phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity（身份证） 自定义值	同时支持多条规则的验证，格式：lay-verify="验证A|验证B"  如：lay-verify="required|phone|number"  另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。
lay-verType	tips（吸附层） alert（对话框） msg（默认）	用于定义异常提示层模式。
lay-reqText	任意字符	用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本  注意：该功能为 layui 2.5.0 新增
lay-submit	无需填写值	绑定触发提交的元素，如button

  事件监听

event	描述
select	监听select下拉选择事件
checkbox	监听checkbox复选框勾选事件
switch	监听checkbox复选框开关事件
radio	监听radio单选框事件
submit	监听表单提交事件

更新渲染， 见官网

     表单元素可能是动态插入，注意更新渲染 

     form.render(); //更新全部      form.render('select'); //刷新select选择框渲染

1、lay-verify 自定义校验规则 与 select选择框和submit监听 实例

    
       
           
   
   
    
    
        
     
            
      用户名            
      
                
                   
      
        
     
        
     
            
      密码            
      
                
                   
      
        
     
        
     
            
      可搜索单行选择框            
      
                
                           请选择一个城市                    北京                    上海                    杭州                            
      
        
     
        
     
            
      
                
       立即提交                
       重置            
      
        
     
    
    
   
   

     

 

   以官方文档为准，自己敲一遍熟悉

 ends ~

 

 

 

转载地址：http://zncgn.baihongyu.com/