Layui简介以及基本使用

布满荆棘的人生 2021-10-14 05:56 567阅读 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；  
![在这里插入图片描述][20190819213621413.jpg]  
代码：

<!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。

运行效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDgxNDIw_size_16_color_FFFFFF_t_70]  
界面会显示一个HelloWorld消息提示层；

[20190819213621413.jpg]: /images/20211013/71060dfffe224a8d81a10d0804d6a95e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDgxNDIw_size_16_color_FFFFFF_t_70]: /images/20211013/1f32d5b5e3b64ac690fac70430d40049.png

发表评论取消回复

表情：

评论列表（有 0 条评论，567人围观）

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

相关阅读

相关 Layui快速入门之第一节Layui的基本使用

目录一：Layui的基本概念二：Layui使用的基本步骤 1.在官网下载layui的基本文件，引入css和js文件 ①：普通方式引入 ②：第三方 CDN 方式引入

短命女/ 2024年03月08日 08:25/ 0 赞/ 90 阅读

相关 JavaScript简介以及使用

一、js的简介 1、js是什么 js是可以嵌入到html中，是基于对象和事件驱动的脚本语言特点： (1)交互性 (2)安全性：js不能访问本地

以你之姓@/ 2023年10月17日 11:53/ 0 赞/ 3 阅读

相关 CSS简介以及使用

一、css的简介 1、什么是css 层叠样式表，css是对html进行样式修饰语言层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲

冷不防/ 2023年10月17日 11:47/ 0 赞/ 6 阅读

相关 JWT基本简介以及实例展示

JWT(Json Web Token)是一种用于双方之间传递安全信息的简洁的、URL安全的表述性声明规范。JWT作为一个开放的标准（ [RFC 7519][]），定义了一种简洁

客官°小女子只卖身不卖艺/ 2022年05月22日 07:58/ 0 赞/ 224 阅读

相关 LayUi简介

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

梦里梦外;/ 2022年02月20日 12:21/ 0 赞/ 395 阅读

相关 LayUI流加载的基本使用

最近写了一个个人博客项目，博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样，每次加载一页的数据显示，只是加载的方式不同。LayUI流加载的官方文档

我会带着你远行/ 2022年01月07日 20:21/ 0 赞/ 1094 阅读

相关 SpringIOC和AOP简介以及基本使用

一、Spring 体系结构 Spring 有可能成为所有企业应用程序的一站式服务点，然而，Spring 是模块化的，允许你挑选和选择适用于你的模块，不必要把剩余部分也引入

比眉伴天荒/ 2021年12月15日 02:41/ 0 赞/ 439 阅读

相关 Spring MVC简介以及基本应用

一、Spring MVC前言介绍 Spring MVC 框架提供了模型-视图-控制的体系结构和可以用来开发灵活、松散耦合的 web 应用程序的组件。MVC 模式导致了应用

我不是女神ヾ/ 2021年12月14日 06:23/ 0 赞/ 467 阅读

相关 Layui简介以及基本使用

最近讲下layui，一个很不错的前端UI框架，个人认为界面比Bootstrap好看，而且功能丰富，算是比较不错的国产UI框架；虽然最近推出的layuiAdmin是收费的，也

布满荆棘的人生/ 2021年10月14日 05:56/ 0 赞/ 568 阅读

相关 layui简介

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

r囧r小猫/ 2021年06月24日 16:10/ 0 赞/ 786 阅读