02-Layui框架入门篇
2020-07-14 06:06
309 查看
1.layui简介
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
2.layui使用
(1)layui框架下载,解压
目录结构如下所示:
[code] ├─css //css目录 │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:) │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心样式文件 ├─font //字体图标目录 ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情) │─lay //模块核心目录 │ └─modules //各模块组件 │─layui.js //基础核心库 └─layui.all.js //包含layui.js和所有模块的合并文件
(2)获得 layui 后,将其完整地部署到项目,只需要引入下述两个文件:
[code]./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化方式,此处可换成:./layui/layui.all.js
(3)模块化使用
[code]layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); });
3.layui入门页面
[code]<!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>
附上layui学习方法:
(1)参见官方文档 https://www.layui.com/doc/
(2)在b站观看视频 https://www.bilibili.com/video/BV1ct411n7SN
相关文章推荐
- layUi框架入门篇(一)——引入
- 前端layui框架快速入门
- Android入门与Android框架解析02--反向调用模式
- layUi框架入门篇(二)——布局
- layUi框架入门篇(二)
- 【02】框架学习—Hibernate第一个入门案例详解
- layUi框架入门篇(三)
- 学习笔记(02):跟着王进老师学Python之Django篇第一季:Django框架入门-MVC和MVT
- 网络请求框架 Retrofit 2 使用入门
- MvvmLight框架使用入门(二)
- 分布式计算开源框架Hadoop入门实践(二)
- 持久层框架:Mybatis快速入门
- Spring security 框架入门学习
- Quartz 框架快速入门(二)
- Web框架梳理:第四章:Spring学习入门、Spring属性注入、AOP编程、注解开发
- 【开源分享:入门到精通ASP.NET MVC+EF6+Bootstrap】月薪过万不是梦,从这里开始,一起搭框架(1)开篇介绍
- 《Java从入门到放弃》框架入门篇:Struts2的基本访问方式
- 黑马程序员——Foundation框架入门:NSString,NSArray,NSDictionary和NSURL
- 界面设计02 - 零基础入门学习Delphi43
- layui框架当合并单元格的时候,造成很差的效果,直接上图