layui（1）

Layui镜像站-经典开源模块化前端 UI 框架(官方文档完整镜像)

 下载框架包   

点击文档，可进入学习界面

 

1.引入框架包

2.定义模块和使用模块

//layui 模块的定义  layui.define([models],callback) 
layui.define(['layer', 'form'], function(exports){ //[models]这里是指即将定义的这个模块是依赖于layer，form模块
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
  
  exports('mod1', {}); //exports把定义的模块暴露出去
//注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致
});    



//layui 模块的使用
layui.use(['mod1', 'mod2'], function(args){
  var mod = layui.mod1;
  
  //……
  
});    

CSS内置公共基础类

类名（class）	说明
布局 / 容器
layui-main	用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline	用于将标签设为内联块状元素
layui-box	用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear	用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container	用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid	用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）
辅助
layui-icon	用于图标
layui-elip	用于单行文本溢出省略
layui-unselect	用于屏蔽选中
layui-disabled	用于设置元素不可点击状态
layui-circle	用于设置元素为圆形
layui-show	用于显示块状元素
layui-hide	用于隐藏元素
文本
layui-text	定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux	灰色标注性文字，左右会有间隔
背景色
layui-bg-red	用于设置元素赤色背景
layui-bg-orange	用于设置元素橙色背景
layui-bg-green	用于设置元素墨绿色背景（主色调）
layui-bg-cyan	用于设置元素藏青色背景
layui-bg-blue	用于设置元素蓝色背景
layui-bg-black	用于设置元素经典黑色背景
layui-bg-gray	用于设置元素经典灰色背景
字体大小及颜色
layui-font-12 （12px 的字体） layui-font-14 （14px 的字体） layui-font-16 （16px 的字体） layui-font-18 （18px 的字体） layui-font-20 （20px 的字体） layui-font-red （红色字体） layui-font-orange （橙色字体） layui-font-green （绿色字体） layui-font-cyan （青色字体） layui-font-blue （蓝色字体） layui-font-black （黑色字体） layui-font-gray （灰色字体）

表单

    
    
    
    
    
    
    
    
    




    
    

        
        

            
            

                
                输入框
                
                

                    
                    
                
            

            

                密码框
                

                    
                
                
                
密码需包含大写字母、小写字母和数字
            

            

                选择框
                

                    
                    
                        
                        
                        北京
                        上海
                        深圳
                        广州
                        杭州
                    
                
            
            

                开关
                

                    
                    
                    
                
            
            

                单选框
                

                    
                    
                    
                
            
            

                多选框
                

                    
                    
                    
                
            

            

                文本框
                

                    
                    
                
            

            

                

                    
                    立即提交
                    
                    重置
                
            

        
        
        
    

 如果为空提交

填好提交