layui-学习02-全局样式

CSS内置公共基础类

类名（class）	说明
布局
layui-main	用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline	用于将标签设为内联块状元素
layui-box	用于排除一些UI框架（如Bootstrap）强制将所有元素设为box-sizing: border-box所引起的尺寸误差
layui-clear	用于消除浮动（通常不怎么经常使用，由于layui几乎没用到浮动）
辅助
layui-icon	用于图标
layui-elip	用于单行文本溢出省略
layui-unselect	用于屏蔽选中
layui-disabled	用于设置元素不可点击状态
layui-circle	用于设置元素为圆形
layui-show	用于显示块状元素
layui-hide	用于隐藏元素
文本
layui-text	定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux	灰色标注性文字，左右会有间隔
背景色
layui-bg-red	用于设置元素赤色背景
layui-bg-orange	用于设置元素橙色背景
layui-bg-green	用于设置元素墨绿色背景（主色调）
layui-bg-cyan	用于设置元素藏青色背景
layui-bg-blue	用于设置元素蓝色背景
layui-bg-black	用于设置元素经典黑色背景
layui-bg-gray	用于设置元素经典灰色背景

 

CSS命名规范

class命名前缀：layui，链接符：-，如：class="layui-form"

命名格式通常分为两种：

一：layui-模块名-状态或类型，

二：layui-状态或类型。

由于有些类并不是是某个模块所特有，他们一般会是一些公共类。如：一（定义按钮的原始风格）：class="layui-btn layui-btn-primary"、二（定义内联块状元素）：class="layui-inline"

 

经常使用公共属性：

元素的基本交互行为，都是由模块自动开启。但不一样的区域可能须要触发不一样的动做，这就须要你设定咱们所支持的自定义属性来做为区分。以下面的 lay-submit、lay-filter即为公共属性（即以 lay- 做为前缀的自定义属性）：<button class="layui-btn" lay-submit lay-filter="login">登入</button>

目前咱们的公共属性以下所示（即广泛运用于全部元素上的属性）

属性	描述
lay-skin=" "	定义相同元素的不一样风格，如checkbox的开关风格
lay-filter=" "	事件过滤器。你可能会在不少地方看到他，他通常是用于监听特定的自定义事件。你能够把它看做是一个ID选择器
lay-submit	定义一个触发表单提交的button，不用填写值