layui中laydate兼容ie_layui菜鸟教程--乐字节前端
主要内容
LayUI 的介绍
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本。
官网:https://www.layui.com
官方文档:https://www.layui.com/doc/
LayUI 的特点
(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。
(2)layui是提供给后端开发人员的ui框架,基于DOM驱动。
下载与使用
- 在 官网首页 下载到 layui 的最新版。目录结构如下: ├─css // css目录
│ │─modules // 模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css // 核心样式文件
├─font // 字体图标目录
├─images // 图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay // 模块核心目录
│ └─modules // 各模块组件
│─layui.js // 基础核心库
└─layui.all.js // 包含layui.js和所有模块的合并文件 - 获得 layui 后,将其完整地部署(拷贝到项目中)到你的项目目录,你只需要引入下述两个文件:
./layui/css/layui.css./layui/layui.js // 提示:如果是采用非模块化方式,此处可换成:./layui/layui.all.js
- 基本的入门页面
开始使用layui
- 还需要声明需要使用的 模块 和 回调函数。参照官方文档,选择自己想要的效果就行。比如:
页面元素
布局
布局容器
固定宽度
将栅格放入一个带有 class="layui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。
……
完整宽度
可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应
……
栅格系统
为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 引进了一套具备响应式能力的栅格系统。将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格布局规则
- 采用 layui-row 来定义行,如:
- 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中:变量 md 代表的是不同屏幕下的标记变量 * 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
- 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)。
- 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
- 可以在列(column)元素中放入你自己的任意元素填充内容
示例:
常规布局(以中型屏幕桌面为例):
你的内容 9/12
你的内容 3/12
响应式规则
栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理。
超小屏幕 (手机<768px)小屏幕 (平板≥768px)中等屏幕 (桌面≥992px)大型屏幕(桌面≥1200px).layui-container的值auto750px970px1170px标记xssmmdlg列对应类 * 为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*总列数12121212响应行为始终按设定的比例水平排列在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列
平板、桌面端的不同表现:
平板≥768px:6/12 | 桌面端≥992px:4/12
平板≥768px:4/12 | 桌面端≥992px:6/12
平板≥768px:12/12 | 桌面端≥992px:8/12
列边距
通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:
/* 支持列之间为 1px-30px 区间的所有双数间隔,以及 1px、5px、15px、25px 的单数间隔 */layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30
示例:
列间距
1/3
1/3
1/3
注:
- layui-col-space:设置后不起作用主要是因为设置的是padding,也就是说是向内缩,所以设置背景色padding也是会添上颜色,看起来好像没有间距一样。可以在里面在加一个div,来达到目的。
- 间距一般不高于30px,如果超过30,建议使用列偏移。
列偏移
对列追加 类似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。 如:layui-col-md-offset3,即代表在“中型桌面屏幕”下,让该列向右偏移 3 个列宽度
列偏移
4/12
偏移4列,从而在最右
注:列偏移可针对不同屏幕的标准进行设定,在当前设定的屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列。
列嵌套
可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素(layui-row),即可完成嵌套。
列嵌套
内部列
内部列
内部列
layui中laydate兼容ie_layui菜鸟教程--乐字节前端相关推荐
- layui菜鸟教程--乐字节前端
主要内容 LayUI 的介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 由国人开发,1 ...
- android ui菜鸟教程,layui菜鸟教程--乐字节前端
主要内容 LayUI 的介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 由国人开发,16年 ...
- split php中_PHP str_split() 函数 | 菜鸟教程
str_split() 函数无法分隔中文字符的问题,可以使用以下函数替代: function mb_str_split($str,$split_length=1,$charset="UTF- ...
- 接收字节流_Java中的IO流之输入流|乐字节
亲爱的乐字节的小伙伴们,小乐又来分享Java技术文章了.上一篇写到了IO流,这篇文章着重 谈谈输入流,再下次再说输出流. 点击回顾上一篇:乐字节Java之file.IO流基础知识和操作步骤 一. 输入 ...
- python中format的用法菜鸟教程-初学者必知的Python中优雅的用法
枚举 之前我们这样操作: i = 0 for item in iterable: print i, item i += 1 现在我们这样操作: for i, item in enumerate(ite ...
- c 语言中嵌套循环,C 嵌套循环 | 菜鸟教程
C 嵌套循环 C 语言允许在一个循环内使用另一个循环,下面演示几个实例来说明这个概念. 语法 C 语言中 嵌套 for 循环 语句的语法: for (initialization; condition ...
- html layui分页代码,layUI分页处理--乐字节前端
分页 模块加载名称:laypage 快速使用 laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染. 分页 layui.use('laypag ...
- java seek指针 换行符_Java网络编程探究|乐字节
大家好,我是乐字节小乐,上次给大家讲述了Java中的IO流之输出流|乐字节,本文将会给大家讲述网络编程. 主要内容如下: 网络 网络分层 IP位置 端口port 网络编程 一. 网络 1.概念 网络即 ...
- 菜鸟教程中Java语法(Java教程+Java面向对象)
Java基本数据类型 Java变量类型 Java运算符 Java循环语句 Java条件语句 Java switch case Java Number & Math类 Java Characte ...
最新文章
- mac 中 Mach-O
- 复习es6-let和const
- 函数作用域,闭包,数据类型的题目
- cell重用的几种方式
- oracle 处理过程,Oracle SQL语句处理过程(转载)
- 最新处理器排名_安兔兔Android处理器天梯榜发布:最强的还是它
- 二进制搜索树_将排序的数组转换为二进制搜索树
- bootstrap-table前端修改后台传来的数据重新进行渲染
- weixintong ent.php,多商户版微信商城对接微信公众号的方法及设置
- hive中导入csv,本地CSV导入hive表
- Angular开发实践(五):深入解析变化监测
- VMware下Hadoop 2.4.1完全分布式集群平台安装与设置
- [PAT A1043]Is is a Binary Search Tree
- android 支付宝 记账本,支付宝记账本如何导出?看看这两种方法
- ibm服务器系统密码忘记,ibm x3850 x5服务器忘记密码了_服务器维修
- android手机 无电池开机画面,还有这种操作,这款手机无电池也能开机
- PDMS.NET窗体
- php批量上传代码,文件批量上传_php文件上传代码(支持文件批量上传)
- ubuntu安装好matlab后键盘复制粘贴快捷键不能使用 解决办法
- python基本数_python--基本数据类型