layui简单入门

最新推荐文章于 2024-06-24 23:23:11 发布

xiang猪~

最新推荐文章于 2024-06-24 23:23:11 发布

阅读量411

点赞数

分类专栏：额外知识

本文链接：https://blog.csdn.net/xfz610614/article/details/100132817

版权

layui是一款轻量级的前端UI框架，强调原生HTML/CSS/JS的书写形式，适合快速界面开发。本文介绍了layui的基本概念，包括layui的获取、目录结构解析，以及快速上手教程，包括非模块化和模块化的页面展示，页面元素的规范和公共类属性的使用。

摘要由CSDN通过智能技术生成

layui简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

获得layui

先在官网中下载layui最新版https://www.layui.com/
目录结构如下：
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
得到压缩包解压，然后将文件部署到目录中即可（基础一般只引入两个文件）

<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>

快速上手

基本的入门页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" 
        content="width=device-width, in