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-submitlay-filter即为公共属性(即以 lay- 作为前缀的自定义属性):<button class="layui-btn" lay-submit lay-filter="login">登入</button>

目前我们的公共属性如下所示(即普遍运用于所有元素上的属性)

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

layui-学习02-全局样式的更多相关文章

  1. 02 uni-app框架学习:设置全局样式统一每个页面的背景颜色

    1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

  2. bootstrap基础学习小记(一)简介模板、全局样式

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  3. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  4. JavaScript学习02 基础语法

    JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...

  5. Java虚拟机JVM学习02 类的加载概述

    Java虚拟机JVM学习02 类的加载概述 类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对 ...

  6. Python学习02 列表 List

    Python学习02 列表 List Python列表 List Python中的列表(List)用逗号分隔,方括号包围(comma-separated values (items) between ...

  7. Android Testing学习02 HelloTesting 项目建立与执行

    Android Testing学习02 HelloTesting 项目建立与执行 Android测试,分为待测试的项目和测试项目,这两个项目会生成两个独立的apk,但是内部,它们会共享同一个进程. 下 ...

  8. Java学习02

    Java学习02 1.导入内部的包 一.在包的下面加入下面一句话: import    java.util.Scanner; 二.在类中 Scanner input=new     Sanner(Sy ...

  9. ThinkPhp学习02

    原文:ThinkPhp学习02 一.什么是MVC                M -Model 编写model类 对数据进行操作 V -View  编写html文件,页面呈现 C -Controll ...

  10. bootstrap复习:全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

随机推荐

  1. PHP查询数据库,对象结果集转化为数组

    $row = $this->db->get();//得出对象结果集 $result = array(); if($row) { //转化为数组 while($value = $row-&g ...

  2. [spring] Ioc 基础

    Ioc的理解:调用类对某一接口的实现类的依赖关系又第三方注入,以移除调用类对接口实现类的依赖.又叫做依赖注入.调用者对接口的选择权利被剥夺,交给了第三方.举个例子,学生本来可以选择哪个老师给他上课的, ...

  3. Ubuntu14.04安装libusb

    https://www.cnblogs.com/ettie999/p/8142973.html libuvc是一个跨平台的USB视频设备库,建立在libusb之上. 它能够对导出标准USB视频类(UV ...

  4. 线程局部存储空间 pthread_key_t、__thread 即 ThreadLocal

    https://www.jianshu.com/p/495ea7ce649b?utm_source=oschina-app 该博客还未学习完  还有   pthread_key_t    Thread ...

  5. Java_break与continue区别

    使用场合不同 break:可以在switch case中使用,也可以在循环中使用   continue:只能在循环中使用,除了switch case 作用不同 break:表示中断,当在switch ...

  6. 2019.04.19 读书笔记 比较File.OpenRead()和File.ReadAllBytes()的差异

    最近涉及到流的获取与转化,终于要还流的债了. 百度了一下,看到这样的两条回复,于是好奇心,决定看看两种写法的源码差异. 先来看看OpenRead() public static FileStream ...

  7. Android Notification 的四种使用方式

    实现通知步骤 一般实现通知需要如下步骤: 1.获取 NotificationManager 实例管理通知: 2.实例 Notification 对象: 3.管理事件 Intent: 4.发送通知. 注 ...

  8. 用PL/sql连接oracle 弹窗出现 could not resolve the connect identifier specified 这个错误

    1 错误如下图: 图1 2.可能原因: 配置oracle客户端中tnsnames.ora文件时,把数据库名弄错,如下图: 图2 箭头所指位置出错.箭头处应该为我们安装时的数据库名(通常是orcl).而 ...

  9. 如何使一个div能够铺满整个页面? && 模态框的制作 && outerHTML

    说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素. 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' ...

  10. elasticsearch安装及与springboot2.x整合

    关于elasticsearch是什么.elasticsearch的原理及elasticsearch能干什么,就不多说了,主要记录下自己的一个使用过程. 1.安装 elasticsearch是用java ...