云社区 博客 博客详情

LayUI

目标成为全栈开发者 发表于 2020-06-24 19:11:44 2020-06-24
0
0

【摘要】 LayUI主要内容LayUI的安装及使用LayUI的介绍​layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。​由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只...

LayUI

主要内容

LayUI

LayUI 的安装及使用

LayUI 的介绍

​ layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

​ 由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本。

​ 官网:https://www.layui.com

​ 官方文档:<https://www.layui.com/doc/>;

LayUI 的特点

(1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。

(2)layui是提供给后端开发人员的ui框架,基于DOM驱动。

下载与使用

  1. 官网首页 下载到 layui 的最新版。目录结构如下:

      ├─css // css目录
       │  │─modules // 模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
       │  │  ├─laydate
       │  │  ├─layer
       │  │  └─layim
       │  └─layui.css // 核心样式文件
       ├─font  // 字体图标目录
       ├─images // 图片资源目录(目前只有layim和编辑器用到的GIF表情)
       │─lay // 模块核心目录
       │  └─modules // 各模块组件
       │─layui.js // 基础核心库
       └─layui.all.js // 包含layui.js和所有模块的合并文件
  2. 获得 layui 后,将其完整地部署(拷贝到项目中)到你的项目目录,你只需要引入下述两个文件:
./layui/css/layui.css
./layui/layui.js // 提示:如果是采用非模块化方式,此处可换成:./layui/layui.all.js
  1. 基本的入门页面



  
  
  开始使用layui
  






 

  1. 还需要声明需要使用的 模块回调函数。参照官方文档,选择自己想要的效果就行。

    比如:

    加VX了解https://i.loli.net/2020/06/22/zbPOtKIqDjo45Mw.png ">点我扫码领取

文章来源: blog.51cto.com,作者:wx5ed754136738d,版权归原作者所有,如需转载,请联系作者。

原文链接:https://blog.51cto.com/14833420/2506719

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇: 一起玩转微服务(11)——一切从简单开始

下一篇:Android的Soong介绍

评论 (0)


登录后可评论,请 登录注册

评论