Layui简介以及基本使用

布满荆棘的人生 2021-10-14 05:56 667阅读 0赞

最近讲下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;
在这里插入图片描述
代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>layui-helloWorld</title>
  6. <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css">
  7. </head>
  8. <body>
  9. <script src="/LayuiTest/layui/layui.js"></script>
  10. <script type="text/javascript">
  11. //一般直接写在一个js文件中
  12. layui.use(['layer', 'form'], function(){
  13. var layer = layui.layer
  14. ,form = layui.form;
  15. layer.msg('Hello World');
  16. });
  17. </script>
  18. </body>
  19. </html>

需要引入layui的css和js。

运行效果:

在这里插入图片描述
界面会显示一个HelloWorld消息提示层;

发表评论

表情:
评论列表 (有 0 条评论,667人围观)

还没有评论,来说两句吧...

相关阅读

    相关 LayUi简介

    版权声明:本文为博主原创文章,未经博主允许不得转载 一:Layer \- Layer 是一款近年来备受青睐的web弹框组建,她具备全方位的解决方案,致力于服务各水

    相关 layui简介

    layui是什么? layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失