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,不用填写值 |
layui-学习02-全局样式的更多相关文章
- 02 uni-app框架学习:设置全局样式统一每个页面的背景颜色
1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page
- bootstrap基础学习小记(一)简介模板、全局样式
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- JavaScript学习02 基础语法
JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...
- Java虚拟机JVM学习02 类的加载概述
Java虚拟机JVM学习02 类的加载概述 类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对 ...
- Python学习02 列表 List
Python学习02 列表 List Python列表 List Python中的列表(List)用逗号分隔,方括号包围(comma-separated values (items) between ...
- Android Testing学习02 HelloTesting 项目建立与执行
Android Testing学习02 HelloTesting 项目建立与执行 Android测试,分为待测试的项目和测试项目,这两个项目会生成两个独立的apk,但是内部,它们会共享同一个进程. 下 ...
- Java学习02
Java学习02 1.导入内部的包 一.在包的下面加入下面一句话: import java.util.Scanner; 二.在类中 Scanner input=new Sanner(Sy ...
- ThinkPhp学习02
原文:ThinkPhp学习02 一.什么是MVC M -Model 编写model类 对数据进行操作 V -View 编写html文件,页面呈现 C -Controll ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
随机推荐
- Linux 内存监控
1.按照内存使用方式排序 top 之后使用 shift + m 那么top按照内存使用从大到小进行排列,使用 shift + P 表示按照CPU进行排序. bigfish 1118m 438m 30m ...
- 故障排查-linux命令测试端口连通性
方法一:telnet法 预置条件:安装telnet step 1.rpm -qa telnet-server(无输出表示telnet-server未安装,则执行step2:否则执行step3) ste ...
- Supreme(ง •̀_•́)ง
1.数学: 4月底18讲看完. 5月书上重点习题再过一遍(注证明题,最值,平均值,有界,介值,零点定理,等式不等式,极限,中值定理(费马,罗尔,拉格朗日,泰勒,柯西,一元积分中值定理,二重积分中值定理 ...
- wiz笔记
分享本地的wiz笔记到网上 , 成为博客 博客园 http://www.cnblogs.com/您的博客名称/services/metablogapi.aspx // region 图片里面的字段:从 ...
- 接口自动化测试框架 :APIAutoTest框架
前言 随着测试技术的发展,接口自动化测试逐渐成为各大公司投入产出比最高的测试技术.介入时间早,执行效率高,稳定性高的优点,让越来越多的公司引入接口自动化测试. 框架简介 APIAutoTest是处理A ...
- golang bufio.Scanner
一, 我们一般会这么用,接收 标准输入的东西: scanner := bufio.NewScanner(os.Stdin) for scanner.Scan() { fmt.Println(scann ...
- Spring异常:Annotation-specified bean name.. for bean class ...
Spring重命名问题.对照项目中的注解,查找@Service是否重重名.由于Spring是在注解下按配置扫描的方式去创建对象的,那么两个重名的注解也就不成立了. 备注,特别注意test包下有没有通过 ...
- 关于 vertical-align 的一些小知识
引子 在日常开发过程中,我们经常会遇到如下的场景,一行中既有图片也有文字,而且图片还要和文字对齐.效果如下: 通常代码如下: <!DOCTYPE html> <html> &l ...
- ServletContextListener知识点
1 知识点 2 代码演示 import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Da ...
- Android ListView分组显示
ListView的实现方法也是普通的实现方法.只不过在list列表中加入groupkey信息.在渲染的时候要判断是否是分组的标题. 就是在使用不同的两个View的时候存在这种情况,convertVie ...