主要内容
LayUI 的介绍
? layui(谐音: 类 UI) 是一款采用自身模块规范编写的前端 UI 框架, 遵循原生 html/CSS/JS 的书写与组织形式, 门槛极低, 拿来即用.
? 由国人开发, 16 年出厂的框架, 其主要提供了很多好看, 方便的样式, 并且基本拿来即用, 和 Bootstrap 有些相似, 但该框架有个极大的好处就是定义了很多前后端交互的样式接口, 如分页表格, 只需在前端配置好接口, 后端则按照定义好的接口规则返回数据, 即可完成页面的展示, 极大减少了后端人员的开发成本.
? 官网: https://www.layui.com/ https://www.layui.com/
? 官方文档:<https://www.layui.com/doc/> https://www.layui.com/doc/> ;
LayUI 的特点
(1)layui 属于轻量级框架, 简单美观. 适用于开发后端模式, 它在服务端页面上有非常好的效果.
(2)layui 是提供给后端开发人员的 ui 框架, 基于 DOM 驱动.
下载与使用
在 官网首页 http://www.layui.com/ 下载到 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
基本的入门页面
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <title>
- 开始使用 layui
- </title>
- <link rel="stylesheet" href="layui/css/layui.css">
- </head>
- <body>
- <!-- 你的 HTML 代码 -->
- <script src="layui/layui.js">
- </script>
- <script>
- // 模块和回调函数
- // 一般直接写在一个 JS 文件中
- layui.use(['layer', 'form'],
- function() {
- var layer = layui.layer,
- form = layui.form;
- layer.msg('Hello World');
- });
- </script>
- </body>
- </HTML>
还需要声明需要使用的 模块 和 回调函数. 参照官方文档, 选择自己想要的效果就行.
比如:
- <script>
- // 注意: 导航 依赖 element 模块, 否则无法进行功能性操作
- layui.use('element', function(){
- var element = layui.element;
- //...
- });
- </script>
页面元素
布局
布局容器
固定宽度
将栅格放入一个带有 class="layui-container" 的特定的容器中, 以便在小屏幕以上的设备中固定宽度, 让列可控.
- <div class="layui-container">
- <div class="layui-row">
- ......
- </div>
- </div>
完整宽度
可以不固定容器宽度. 将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中, 那么宽度将不会固定, 而是 100% 适应
- <div class="layui-fluid">
- ......
- </div>
栅格系统
? 为了丰富网页布局, 简化 HTML/CSS 代码的耦合, 并提升多终端的适配能力, layui 引进了一套具备响应式能力的栅格系统. 将容器进行了 12 等分, 预设了 4*12 种 CSS 排列类, 它们在移动设备, 平板, 桌面中 / 大尺寸四种不同的屏幕下发挥着各自的作用.
栅格布局规则
采用 layui-row 来定义行, 如:
<div class="layui-row"></div>
采用类似 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) 元素中放入你自己的任意元素填充内容
示例:
- <h3 > 常规布局(以中型屏幕桌面为例):</h3>
- <div class="layui-row">
- <div class="layui-col-md9" style="background-color: #00F7DE;">
你的内容 9/12
- </div>
- <div class="layui-col-md3" style="background-color: rosybrown;">
你的内容 3/12
- </div>
- </div>
响应式规则
? 栅格的响应式能力, 得益于 CSS3 媒体查询 (Media Queries) 的强力支持, 从而针对四类不同尺寸的屏幕, 进行相应的适配处理.
超小屏幕 (手机 & lt;768px) | 小屏幕 (平板≥768px) | 中等屏幕 (桌面≥992px) | 大型屏幕 (桌面≥1200px) | |
---|---|---|---|---|
.layui-container 的值 | auto | 750px | 970px | 1170px |
标记 | xs | sm | md | lg |
列对应类 * 为 1-12 的等分数值 | layui-col-xs* | layui-col-sm* | layui-col-md* | layui-col-lg* |
总列数 | 12 | 12 | 12 | 12 |
响应行为 | 始终按设定的比例水平排列 | 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 | 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 | 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 |
- <h3 > 平板, 桌面端的不同表现:</h3>
- <div class="layui-row">
- <div class="layui-col-sm6 layui-col-md4"
- style="background-color: thistle">
平板≥768px:6/12 | 桌面端≥992px:4/12
- </div>
- </div>
- <div class="layui-row">
- <div class="layui-col-sm4 layui-col-md6"
- style="background-color: mediumaquamarine;">
平板≥768px:4/12 | 桌面端≥992px:6/12
- </div>
- </div>
- <div class="layui-row">
- <div class="layui-col-sm12 layui-col-md8"
- style="background-color: coral">
平板≥768px:12/12 | 桌面端≥992px:8/12
- </div>
- </div>
列边距
? 通过 "列间距" 的预设类, 来设定列之间的间距. 且一行中最左的列不会出现左边距, 最右的列不会出现右边距. 列间距在保证排版美观的同时, 还可以进一步保证分列的宽度精细程度. 我们结合网页常用的边距, 预设了 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
示例:
- <h3 > 列间距</h3>
- <div class="layui-row layui-col-space10">
- <div class="layui-col-md4">
- <!-- 需要在 layui-col-md4 里面再加一层 div -->
- <div style="background-color: #009688;">
- 1/3
- </div>
- </div>
- <div class="layui-col-md4">
- <div style="background-color: burlywood;">
- 1/3
- </div>
- </div>
- <div class="layui-col-md4">
- <div style="background-color: silver;">
- 1/3
- </div>
- </div>
- </div>
注:
layui-col-space: 设置后不起作用主要是因为设置的是 padding, 也就是说是向内缩, 所以设置背景色 padding 也是会添上颜色, 看起来好像没有间距一样. 可以在里面在加一个 div, 来达到目的.
间距一般不高于 30px, 如果超过 30, 建议使用列偏移.
列偏移
? 对列追加 类似 layui-col-md-offset* 的预设类, 从而让列向右偏移. 其中 号代表的是偏移占据的列数, 可选中为 1 - 12.
? 如: layui-col-md-offset3*, 即代表在 "中型桌面屏幕" 下, 让该列向右偏移 3 个列宽度
- <h3 > 列偏移</h3>
- <div class="layui-row">
- <div class="layui-col-md4" style="background-color: rosybrown;">
- 4/12
- </div>
- <div class="layui-col-md4 layui-col-md-offset4"
- style="background-color: cornflowerblue;">
偏移 4 列, 从而在最右
- </div>
- </div>
? 注: 列偏移可针对不同屏幕的标准进行设定, 在当前设定的屏幕下有效, 当低于桌面屏幕的规定的临界值, 就会堆叠排列.
列嵌套
? 可以对栅格进行无穷层次的嵌套. 在列元素 (layui-col-md*) 中插入行元素(layui-row), 即可完成嵌套.
- <h3 > 列嵌套</h3>
- <div class="layui-row layui-col-space5">
- <div class="layui-col-md5" style="background-color: thistle;">
- <div class="layui-row">
- <div class="layui-col-md3" style="background-color: burlywood;">
内部列
- </div>
- <div class="layui-col-md5" style="background-color: indianred;">
内部列
- </div>
- <div class="layui-col-md4" style="background-color: mediumaquamarine;">
内部列
- </div>
- </div>
- </div>
- </div>
来源: http://www.bubuko.com/infodetail-3596758.html