Layui的基本使用(Idea)

官网下载：  在线示例 - Layui

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

目录结构：

  ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库
     

Layui部分模块依赖jQuery（比如layer)    引用 jQuery

新建一个项目Idea ->file->new->project->Spring Initializr->next->next->web->Spring Web Spring Reactive Web-> 改文件路径->把下载的layui文件夹内css font layui.js贴进新建的文件夹中 link href的路径(将解压包文件部署到项目中，引入两个文件)

布局、颜色、图标

    
    
    
    
    
    








Layui






    

    常规布局（以中型屏幕桌面为例）：
    

        

            
你的内容 9/12
        
        

            
你的内容 3/12
        
    

    移动设备、平板、桌面端的不同表现：
    

        

            
移动：6/12 | 平板：6/12 | 桌面：4/12
        
        
        

            
移动：6/12 | 平板：6/12 | 桌面：4/12
        
        
        

            
移动：4/12 | 平板：12/12 | 桌面：4/12
        
        
        

            
移动：4/12 | 平板：7/12 | 桌面：8/12
        
        
        

            
移动：4/12 | 平板：5/12 | 桌面：4/12
        
        


        

            

                
1/3
            
            
            

                
1/3
            
            
            

                
 1/3
            
            

        

    

    

例：

 

动画、按钮、表单

表单

实现效果（复选框）要用到use使用 form 

    
    
    














一个标准的按钮
一个标准的按钮
一个可跳转的按钮

导航

 ... ...