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)功 ...
随机推荐
- PHP查询数据库,对象结果集转化为数组
$row = $this->db->get();//得出对象结果集 $result = array(); if($row) { //转化为数组 while($value = $row-&g ...
- [spring] Ioc 基础
Ioc的理解:调用类对某一接口的实现类的依赖关系又第三方注入,以移除调用类对接口实现类的依赖.又叫做依赖注入.调用者对接口的选择权利被剥夺,交给了第三方.举个例子,学生本来可以选择哪个老师给他上课的, ...
- Ubuntu14.04安装libusb
https://www.cnblogs.com/ettie999/p/8142973.html libuvc是一个跨平台的USB视频设备库,建立在libusb之上. 它能够对导出标准USB视频类(UV ...
- 线程局部存储空间 pthread_key_t、__thread 即 ThreadLocal
https://www.jianshu.com/p/495ea7ce649b?utm_source=oschina-app 该博客还未学习完 还有 pthread_key_t Thread ...
- Java_break与continue区别
使用场合不同 break:可以在switch case中使用,也可以在循环中使用 continue:只能在循环中使用,除了switch case 作用不同 break:表示中断,当在switch ...
- 2019.04.19 读书笔记 比较File.OpenRead()和File.ReadAllBytes()的差异
最近涉及到流的获取与转化,终于要还流的债了. 百度了一下,看到这样的两条回复,于是好奇心,决定看看两种写法的源码差异. 先来看看OpenRead() public static FileStream ...
- Android Notification 的四种使用方式
实现通知步骤 一般实现通知需要如下步骤: 1.获取 NotificationManager 实例管理通知: 2.实例 Notification 对象: 3.管理事件 Intent: 4.发送通知. 注 ...
- 用PL/sql连接oracle 弹窗出现 could not resolve the connect identifier specified 这个错误
1 错误如下图: 图1 2.可能原因: 配置oracle客户端中tnsnames.ora文件时,把数据库名弄错,如下图: 图2 箭头所指位置出错.箭头处应该为我们安装时的数据库名(通常是orcl).而 ...
- 如何使一个div能够铺满整个页面? && 模态框的制作 && outerHTML
说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素. 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' ...
- elasticsearch安装及与springboot2.x整合
关于elasticsearch是什么.elasticsearch的原理及elasticsearch能干什么,就不多说了,主要记录下自己的一个使用过程. 1.安装 elasticsearch是用java ...