Layui简介以及基本使用
2020-01-13 16:47
573 查看
最近讲下layui,一个很不错的前端UI框架,个人认为界面比Bootstrap好看,而且功能丰富,算是比较不错的国产UI框架;
虽然最近推出的layuiAdmin是收费的,也是能理解,毕竟团队要继续升级和维护产品,要money;
layui官网:http://www.layui.com/ 最新版本2.3
学习的话 主要结合一下几个,
1,官方DEMO http://www.layui.com/demo/
2,官方文档 http://www.layui.com/doc/
3,问题交流社区 http://fly.layui.com/
我们先搞个HelloWorld,认识下基本使用;
新建一个动态web项目,把下载下来的layui开发包解压,然后把layui文件夹放入webcontent下,然后新建一个helloWorld.html;
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>layui-helloWorld</title> <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css"> </head> <body> <script src="/LayuiTest/layui/layui.js"></script> <script type="text/javascript"> //一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> </body> </html>
需要引入layui的css和js。
运行效果:
界面会显示一个HelloWorld消息提示层;
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- Linux基本内容介绍(6) -- TCP/IP模型简介,iproute命令使用,进程管理工具介绍以及shell编程until和while的联系
- 文字编辑器FCKeditor 简介以及基本配置和使用方法
- CAShapeLayer的简介以及基本使用
- HTML简介以及基本使用
- Linux基本内容介绍(5) --rpm与yum的使用,at和crontab命令简介,以及sed的常用操作
- iOS海哥开发笔记 (海哥原创,CALayer简介 以及基本使用)
- GridView的基本功能以及使用方法
- pin 的使用简介 ——环境设置 基本工具的使用 相关知识
- Ruby之旅(二) Ruby的基本语法以及对象的使用,方法的定义及调用,属性的定义及使用
- Qt简介以及如何配置Qt使用VS2010进行开发
- Android中蓝牙的基本使用----BluetoothAdapter类简介
- PHP扩展开发-08-数组的使用以及HashTable简介
- Hsqldb简介和基本使用
- RTSP简介以及常用方法使用实例
- Silverlight实用窍门系列:50.InkPresenter涂鸦板的基本使用,以及将效果保存为Png图片【附带源码实例】
- byobu "屏风" 简介 ,以及在CentOS下安装及日常使用
- Oracle: 一、Oracle简介,安装,基本使用,建表增删改查,数据类型及常用命令
- Ant介绍以及基本使用指南
- javaBean【01】javaBean简介及基本使用
- Windows 8技巧:Windows 8的基本变换和矩阵变换以及AppBar应用程序栏的使用