1、layui基础（导航 表格 表单）

1.基本样式

            layui - col- space* '*' 列间距最多只有到30px

            layui - col- offset* '*' 右偏移占据的列数

             layui - row  创建行 ， layui-btn 按钮 （有颜色 大小）

 

2.模块引用

 

▶▶导航模块 element

 

　　//单个模块用字符串' '，多个模块用数组[  ];

 

　　　　layui.use('element',function(){

      　　　　var element = layui.element;

　　　　})

 

　　1.水平导航 layui-nav   

           layui-nav-item 导航项（layui-this 选中）

           layui-nav-child 二级菜单

 

　　2. 垂直导航 layui-nav   layui-nav-tree

 

　　3. 侧边导航 layui-nav   layui-nav-tree  layui-nav-side

      

    　　 设置导航的颜色： layui-nav-bg-颜色（molv  cyan blue 等），layui-bage 徽章

 

　　4. 面包屑导航 layui-breadcrumb     属性 lay-separator ="-" (分割符)

 

　　　　<cite>选中<cite>

 

▶▶选项卡模块 element

        

　　选项卡 layui-tab ; 

 

　　简介风格 layui-tab-brief ;卡片风格 layui - tab -card

 

　　带有删除的选项卡  属性lay-allowClose = “true”

 

▶▶表格

 

　　表格 layui-table ; 

 

　　//设置列宽

　　<colgroup>

  　　   <clo widrh='150'>

    　　 <clo height='200'>

    　　 <clo>

　　</colgroup>

 

 属性

    layui-even显示隔行色

    layui-skin 设置边框  line（行） row（列） bob（无边框）

    layui-size 表格尺寸  sm（小） lg（大）

 

▶▶表单 form模块

 

<form class='layui-form' action="">

    <div class="layui-form-item">

        <label class="layui-form-label"></label>

        <div class="layui-input-block">  //layui-input-inline 不换行

             <input type="text" name="title" class="layui-input" />

        </div>

    </div>

</form>

 

input属性：

1.  required 注册浏览器所规定必填字段
2. lay-verify="required" 注册form模块需要验证的类型 （点击提交按钮会有提示）
3.  layui-input-block 占据全部宽度
4.  ayui-input-inline 占据部分宽度
5.  autocomplete 表单元素是否自动填充，当浏览器缓中存在相同的name时会自动填充。

 

select下拉选择框：

　　disabled选择性开启禁用，selected设置option默认选项

　　optgroup标签给option分组

　　属性lay-search 开启搜索功能

 

 

type="checkbox"复择框：

　　title自定义属性文本 （不需要不设置）

　　lay-skin属性设置样式效果 paramary表示原始效果

 

开关:

　　将复选框设置lay-skin="switch" 形成开关

　　lay-text=“打开|关闭” 设置开关的文本，通过‘ | ’分割

 

　　type="radio"复择框：name相同

 

　　textarea文本域：layui-textarea

 

组装行内表单：

 

　　class=“layui-inline”定义外层行内

　　class=“layui-input-inline”定义内层行内

　　lay- ignore  忽略美化，保留系统风格

　　lay-form-mid  ‘-’美化横线

　　lay-form-pane  设定表单的方框风格