layui - 页面元素
参考：https://www.layui.com/doc/base/element.html
内容包括：css (即已定义样式的class)、HTML (即一些layui自定义的属性)
细分为：布局、颜色、图标、动画、按钮、表单、导航、选项卡、进度条、面板、表格、徽章、时间线、辅助
概括：
css规范：
css内置公共类(已定义内置样式的类名class)：(部分常用)
布局 / 容器：
layui-main 用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline 用于将标签设为内联块状元素
layui-box 用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear 用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container 用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid 用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）
辅助：
layui-icon 用于图标
layui-elip 用于单行文本溢出省略
layui-unselect 用于屏蔽选中
layui-disabled 用于设置元素不可点击状态
layui-circle 用于设置元素为圆形
layui-show 用于显示块状元素
layui-hide 用于隐藏元素
文本：
layui-text 定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux 灰色标注性文字，左右会有间隔
背景色（layui内置7种背景色）：
layui-bg-red 用于设置元素赤色背景
layui-bg-orange 用于设置元素橙色背景
layui-bg-green 用于设置元素墨绿色背景（主色调）
layui-bg-cyan 用于设置元素藏青色背景
layui-bg-blue 用于设置元素蓝色背景
layui-bg-black 用于设置元素经典黑色背景
layui-bg-gray 用于设置元素经典灰色背景
若需要自行定义一些样式请参考内置css class命名使class命名遵循一定规范，
命名格式一般分为两种：一：layui-模块名-状态或类型，二：layui-状态或类型，但请勿占用Layui已经命名好的类。
HTML规范：
结构：使用layui元素模块时请严格遵守其相应HTML结构，否则可能导致其功能失效（标签、类名）
公共属性：以 lay- 为前缀的自定义属性，各模块需要用到的详见官网介绍，常用(普遍运用于所有元素上的)属性如：
lay-skin=" " 定义相同元素的不同风格，如checkbox的开关风格
lay-filter=" " 事件过滤器，一般用于监听特定的自定义事件，可视为一个ID选择器
lay-submit 定义一个触发表单提交的button，不用填写值
layui页面元素包括：
布局 栅格 / 后台布局
栅格：
布局规则：
lay-row 定义行，如
layui-col-md* 定义一组列(column) 放在行(row)中，md表示不同屏幕下的标记(见响应式规则)，*可选值1-12，*总和 =12刚好排满列 >12则另起一行
列可以同时出现最多4种不同组合，即 xs、sm、md、lg，分别详见响应式规则
layui-col-space5、layui-col-md-offset3 类似的预设类可定义列的间距和偏移
在列(column)中可放入任意内容
布局容器：
class="layui-container" 将栅格放入容器 在小屏幕以上的设备中固定宽度让列可控 ...
class="layui-fluid" 将栅格或其他元素放入容器 不固定宽度而是100%适应 ...
响应式规则：（ * 取值1-12 即列宽为*列 每列宽度为容器宽度的1/12 总列数均为12）
超小屏幕 手机<768px .layui-container的值为auto 标记xs 列对应类 layui-col-xs* 响应式行为 始终按设定的比例水平排列
小屏幕 平板>=768px .layui-container的值为750px 标记sm 列对应类 layui-col-sm* 响应式行为 在当前屏幕下水平排列-当屏幕大小低于临界值则堆叠排列
中等屏幕 桌面>=992px .layui-container的值为970px 标记md 列对应类 layui-col-md* 响应式行为 在当前屏幕下水平排列-当屏幕大小低于临界值则堆叠排列
大型屏幕 桌面>=1200px .layui-container的值为1170px 标记lg 列对应类 layui-col-lg* 响应式行为 在当前屏幕下水平排列-当屏幕大小低于临界值则堆叠排列
响应式公共类： * 可选值 xs、sm、md、lg
layui-show-*-block 定义不同设备下的 display:block;
layui-show-*-inline 定义不同设备下的 display:inline;
layui-show-*-inline-block 定义不同设备下的 display:inline-block;
layui-hide-* 定义不同设备下的隐藏类，即 display:none;
列间距：layui-col-space* 间距 *px *取值1-30的所有双数以及 1 5 15 25
列偏移：layui-col-md-offset* 使列向右偏移*列 (每列宽度1/12容器宽度)
嵌套：理论上可以对栅格进行无限嵌套，如在列(layui-col-md)中插入一个行元素(layui-row)
内部列
兼容：栅格的响应式能力得益于css3的媒体查询(Media Queries)，但IE8/9不支持媒体查询，可以使用以下补丁(来自开源社区,布丁可放在任意位置)使之兼容--
后台布局：layui既可编织出绚丽的前台页面，又可满足繁杂的后台功能需求（官网提供后台现场方案 https://www.layui.com/doc/element/layout.html#admin 可供参考）
颜色 主题色设计感 / 内置背景色
主题色设计感可参考官网提供的一些示例及layuiAdmin。layui还内置7种背景色（见css内置公共类）
图标 字体图标
类 layui-icon 为必须，layui-icon-face-smile 为笑脸图标，此处style设置图标大小和颜色，
layui2.3.0起支持font-class的形式定义图标，这之前只能用unicode来定义图标：
图标参考：https://www.layui.com/doc/element/icon.html#table
跨域问题：由于浏览器存在同源策略，所以如果 layui（里面含图标字体文件）所在的地址与当前页面地址不在同一个域下会出现图标跨域问题。
所以要么把 layui 与网站放在同一服务器，要么就对 layui 所在资源服务器的 Response Headers 加上属性：Access-Control-Allow-Origin: *
动画 内置 CSS3 动画
其中 layui-anim 是必须的 后面跟着的即是不同的动画类
循环动画，追加：layui-anim-loop
内置css3动画：
layui-anim-up 从最底部往上滑入 layui-anim-upbit 微微往上滑入
layui-anim-scale 平滑放大 layui-anim-scaleSpring 弹簧式放大
layui-anim-fadein 渐现 layui-anim-fadeout 渐隐
layui-anim-rotate 360度旋转 追加：layui-anim-loop 循环动画
按钮 button 组
基本用法： class="layui-btn"
一个可跳转的按钮
主题名称 组合
原始 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 layui-btn-primary"
默认 class="layui-btn layui-btn-radius"
百搭 class="layui-btn layui-btn-radius layui-btn-normal"
暖色 class="layui-btn layui-btn-radius layui-btn-warm"
警告 class="layui-btn layui-btn-radius layui-btn-danger"
禁用 class="layui-btn layui-btn-radius layui-btn-disabled"
大型百搭 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告 class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"
图标： 如--
按钮组： 将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配
按钮容器： 如--
表单 form 元素集合 (此处仅展示元素，更多完整form使用示例详情见form模块)
基本用法： 设置class layui-form layui-form-item ...
依赖加载模块：form （如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
输入框：
required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 class="layui-input"：layui.css提供的通用CSS类
下拉选择框：
复选框：（设置value="1"可自定义值否则选中时返回的是默认的on）
默认风格：（标签式，外层框--文字+选框）
原始风格：（常见样式，选框+文字）
开关：（设置value="1"可自定义值否则选中时返回的是默认的on）
其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格
单选框：
文本域：
设置class="layui-textarea"即使用layui提供的通用css类
组装行内表单：（使表单元素如输入框显示在同一行内）
-
忽略美化：
表单方框风格：
追加 layui-form-pane 的class可设置表单为方框风格(即使表单元素和其邻近的label文字被方框划为一行的样式)
导航 菜单 / 面包屑
基本用法： 设置class layui-nav layui-nav-item ...
依赖加载模块：element
layui.use('element', function(){ var element = layui.element; /*其他操作略*/ }); });
示例：
更多: 导航栏class可追加css背景类让导航呈现不同的主题色，水平导航支持 layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝），垂直导航支持 layui-bg-cyan（藏青），如--
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是 垂直导航需要追加class：layui-nav-tree 侧边导航需要追加class：layui-nav-tree layui-nav-side 如--
-
可选属性--
…
刷新
面包屑--
选项卡 Tabs 切换
基本用法： 设置class layui-tab layui-tab-title layui-tab-content ...
依赖加载组件：element （必须加载element模块，相关功能才能正常使用）
示例：
- tab1
- tab2
- tab3
内容1
内容2
内容3
ID焦点定位： 设置 lay-id="xxx" 可作唯一的匹配索引以用于外部的定位切换，如--
- 文章列表
- 发送信息
- 权限分配
- 审核
- 订单管理
...
注：无论是导航、还是Tab，都需依赖 element模块，大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如Tab事件监听等，需按照场景选择性使用
进度条 progress
基本用法： 设置class layui-progress ...
依赖加载组件：element
示例：
面板 折叠 / 手风琴
基本用法： 设置class layui-card layui-card-header layui-card-body ...
一个独立的容器，适用于 QA说明、帮助文档等
依赖加载组件：element
示例：
卡片面板
卡片式面板面板通常用于非白色背景色的主体内从而映衬出边框投影，如果网页采用的是默认的白色背景则不建议使用卡片面板
面板1
内容区域
面板2
内容区域
面板3
内容区域
表格 静态 table
基本用法： 设置class layui-table
示例：
昵称
加入时间
签名
行1列1
2020-12-09
行1列3
行2列1
2020-12-10
行2列3...
注： 此为静态表格，若需要对表格进行排序、数据交互等一系列功能性操作请参考table模块
徽章 小圆点 / 小边框
示例：
9
8
也可搭配 导航、按钮、选项卡等使用
时间线 timeline
基本用法： 设置class layui-timeline layui-timeline-item layui-timeline-axis layui-timeline-content layui-timeline-title ...
示例：
-
8月18日
时间线1
- ...
辅助 引用 / 字段集 / 横线等
示例：
引用区域的文字
引用区域的文字