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和bootstrap哪个好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,不⽤填写值
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论