03 layui--页面元素

引言：本文主要是针对Layui官网文档中的l页面元素进行学习，然后归纳笔记，进行简化记忆，方便后期复盘巩固，如需深入学习，详见：Layui 页面元素规范与说明 (layuion.com).

一、CSS内置公共基础类

布局/容器

1. layui-main    //设置一个宽度为1140px的水平居中块（无响应式）

2. layui-inline    //用于将标签设为内联块状元素

3. layui-clear    //消除浮动

4. layui-btn-container    //定义按钮的父容器     v2.2.5新增

5. layui-btn-fluid     //定义流体按钮（宽度最大适应化） v2.2.5新增

辅助

1. layui-icon   //图标

2. layui-elip   //单行文本溢出并显示省略号

3. layui-unselect    //屏蔽选中

4. layui-disabled    //设置元素不可点击

5. layui-circle       //设置元素为圆形

6. layui-show       //显示块状元素

7. layui-hide        //隐藏元素

文本

1. layui-text       //定义一段文本区域，该区域内的特殊标签（如a、li、em等）将会进行CSS渲染

2. layui-word-aux    //浅色为文字，左右会有间隔

背景颜色

1. layui-bg-red    //红

2. layui-bg-orange    //橙

3. layui-bg-green      //绿（主色调）

4. layui-bg-cyan       //藏青

5. layui-bg-blue        //蓝

6. layui-bg-black      //深

7. layui-bg-gray       //浅

字体大小及颜色

1. layui-font-12 

2. layui-font-14

3. layui-font-16

4. layui-font-18

5. layui-font-20

--------------------

1. layui-font-red

2. layui-font-orange

3. layui-font-green

4. layui-font-cyan   青

5. layui-font-blue    

6. layui-font-black

7. layui-font-gray  灰

二、CSS命名规范

命名格式一般为两种：

1. layui-模块名-状态或类型      如, 定义按钮的原始风格：class = "layui-btn  layui-btn-primary"

2. layui-状态或类型   (某些类并非是某个模块所特有的，通常会是一些公共类）

如，定义内联块状元素：class = "layui-inline"

三、HTML规范：结构

Layui在解析HTML元素时，必须充分确保其结构能够被支持。如：改变了Tab选项卡的结构，则很可能导致Tab功能失效，切换选项卡会内容不对应等。在嵌套HTML时，要细读各个元素模块的相关文档。

    

        
标题一
        
标题二
        
标题三
    
    

        
内容1
        
内容3
    

四、HTML规范：常用公共属性

元素的基本交互行为，由模块自动开启，不同的区域可能需要触发不同的动作，需要设定所支持的自定义属性来作为区分。而以lay-作为前缀的自定义属性为公共属性。

常见的公共属性如下（普遍用于所有元素的属性）

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

2. lay-filter：事件过滤器，一般用于获得特定的自定义事件，可视为ID选择器

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