精华内容
下载资源
问答
  • LayUI框架

    2021-05-02 22:50:44
    #LayUI框架 1.为后端程序员量身定做 2.layui 的模块是基于 layui.js 内部实现的异步模块加载方式,它并不遵循于AMD(没有为什么,毕竟任性呀!),而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的...

    你可以在官网首页https://www.layui.com/doc/ 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境

    #LayUI框架
    1.为后端程序员量身定做
    2.layui 的模块是基于 layui.js 内部实现的异步模块加载方式,它并不遵循于AMD(没有为什么,毕竟任性呀!),而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后,成为 layui 最核心的模块加载引擎。

    一、使用?

    ├─css //css目录
    │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
    │ │ ├─laydate
    │ │ ├─layer
    │ │ └─layim
    │ └─layui.css //核心样式文件
    ├─font //字体图标目录
    ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
    │─lay //模块核心目录
    │ └─modules //各模块组件
    │─layui.js //基础核心库
    └─layui.all.js //包含layui.js和所有模块的合并文件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>LayUI的使用</title>
    		<!-- 引入layui核心css文件 -->
    		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    		<!-- 引入layui核心js文件  采用模块化引入 -->
    		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    			<script>
    			//一般直接写在一个js文件中
    			layui.use(['layer', 'form'], function(){
    			  var layer = layui.layer
    			  ,form = layui.form;
    			  // 弹出框
    			  layer.msg('Hello World');
    			});
    			</script> 
    			</body>
    		</html>
    	</body>
    </html>
    
    

    二、布局容器

    代码如下(示例):

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>布局容器</title>
    		<!-- 引入layui核心css文件 -->
    		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    		<!-- 引入layui核心js文件  采用模块化引入 -->
    		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<!--固定宽度  两侧留白
    			完整宽度 占据屏幕百分百
    		 -->
    		<!-- <div class="layui-container" style="background-color: navajowhite; height: 300px;">
    		 	固定宽度
    		 </div> -->
    		 
    		 <div class="layui-fluid " style="background-color: cyan;">
    		 	完整宽度
    		 </div>
    	</body>
    </html>
    
    

    三、栅格系统

    代码如下(示例):

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>栅格系统</title>
    		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    		<!-- 引入layui核心js文件  采用模块化引入 -->
    		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<!-- 
    		 栅格系统1.定义行 layui-row
    				2.定义列  layui-col-md-*   md  sm  xs lg
    		 
    		 
    		 -->
    		<div class="layui-container">
    			<!-- 定义行 -->
    			<div class="layui-row">
    				<!-- 定义列 -->
    				<div class="layui-col-md5" style="background-color: deepskyblue;">
    					内容的十二分之五
    				</div>
    				<div class="layui-col-md7 " style="background-color: saddlebrown;">
    					内容的十二分之七
    				</div>
    			</div>
    			
    			<!-- 定义行 -->
    			<div class="layui-row" >
    				<!-- 定义列 -->
    				<div class="layui-col-md4" style="background-color: darkkhaki;">
    					内容的十二分之四
    				</div>
    				<div class="layui-col-md7" style="background-color: #01AAED;">
    					内容的十二分之七
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    
    

    按钮

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>按钮</title>
    		<link rel="stylesheet" type="text/css" href="css/layui.css"/>
    		<!-- 引入layui核心js文件  采用模块化引入 -->
    		<script src="layui.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<button type="button" class="layui-btn">一个标准的按钮</button>
    		<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    		<div class="layui-btn">一个按钮</div>
    		
    		<hr >
    		<div class="layui-btn layui-btn-primary">原始</div>
    		<div class="layui-btn">默认</div>
    		<div class="layui-btn layui-btn-normal">百搭</div>
    		<div class="layui-btn layui-btn-warm">暖色</div>
    		<div class="layui-btn layui-btn-danger">警告</div>
    		<div class="layui-btn layui-btn-disabled">禁用</div>
    		
    		
    		<hr >
    					
    					<!-- 大型	class="layui-btn layui-btn-lg"
    			默认	class="layui-btn"
    			小型	class="layui-btn layui-btn-sm"
    			迷你	class="layui-btn layui-btn-xs" -->
    			<div class="layui-btn layui-btn-lg">大型</div>
    			<div class="layui-btn">默认</div>
    			<div class="layui-btn layui-btn-sm">小型</div>
    			<div class="layui-btn layui-btn-xs"> 迷你</div>
    			
    			<hr >
    			<!-- 
    			 主题	组合
    			 原始	class="layui-btn layui-btn-radius layui-btn-primary"
    			 默认	class="layui-btn layui-btn-radius"
    			 百搭	class="layui-btn layui-btn-radius layui-btn-normal"
    			 暖色	class="layui-btn layui-btn-radius layui-btn-warm"
    			 警告	class="layui-btn layui-btn-radius layui-btn-danger"
    			 禁用	class="layui-btn layui-btn-radius layui-btn-disabled"
    			 
    			 -->
    			<div class="layui-btn layui-btn-radius layui-btn-primary">原始</div>
    			<div class="layui-btn layui-btn-radius">默认</div>
    			<div class="layui-btn layui-btn-radius layui-btn-normal">百搭</div>
    			<div class="layui-btn layui-btn-radius layui-btn-warm">暖色</div>
    			<div class="layui-btn layui-btn-radius layui-btn-danger">警告</div>
    			<div class="layui-btn layui-btn-radius layui-btn-disabled">禁用</div>
    			
    			<hr >
    			<!-- 图标 -->
    			<button type="button" class="layui-btn">
    			  <i class="layui-icon">&#xe608;</i> 添加
    			</button>
    			 
    			<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    			  <i class="layui-icon">&#x1002;</i>刷新
    			</button>
    			
    			<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">
    			  <i class="layui-icon layui-icon-heart"></i>关注
    			</button>
    			
    	</body>
    </html>
    
    

    ##以此类推
    需要什么直接去官网跟BootStrap差不多的使用

    展开全文
  • layui框架

    2017-10-11 18:54:00
    layui框架 Fly社区/分享一个layui风格的grid、greegrid 转载于:https://www.cnblogs.com/cb0327/p/7652355.html

     

    转载于:https://www.cnblogs.com/cb0327/p/7652355.html

    展开全文
  • Layui框架

    2019-04-12 10:25:56
    简介 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归...

    简介

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

    layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。

    获得Layui

    1. 官网首页下载

    下载Layui到官网:https://www.layui.com/下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:

    2. Git 仓库下载

    你也可以通过GitHub码云得到 layui 的完整开发包,以便于你进行二次开发,或者 Fork layui 为我们贡献方案

    3. npm 安装

    一般用于 WebPack 管理

    用法

    1.模块化的用法(推荐)

    我们推荐你遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:

    <script>
    layui.config({
      base: '/js/modules/' //你存放新模块的目录,注意,不是layui的模块目录
    }).use('index'); //加载layui入口
    </script>    

    上述的 index 即为你/js/modules/ 目录下的 index.js,它的内容如下:

    /**
    项目JS主入口
    以依赖layui的layer和form模块为例
    **/
    layui.define(['layer', 'form'], function(exports){
    var layer = layui.layer
    ,form = layui.form;
    layer.msg('Hello World');
    exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致
    });

    2.非模块化用法

    如果你并不喜欢 layui 的模块化组织方式,你完全可以毅然采用“一次性加载”的方式,我们将 layui.js 及所有模块单独打包合并成了一个完整的js文件,用的时候直接引入这一个文件即可。当你采用这样的方式时,你无需再通过 layui.use() 方法加载模块,直接使用即可,如:

    <script src="../layui/layui.all.js"></script>
    <script>
    //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
    !function(){
    //无需再执行layui.use()方法加载模块,直接使用即可
    var form = layui.form
    ,layer = layui.layer;
    //…
    }();
    </script>

    但你必须知道,采用该方式,意味着 layui 的模块化已经失去了它的意义。但不可否认,它使用起来会更简单直接

    展开全文
  • SpringBoot项目搭建LayUI框架,以及引入LayUI框架js、css的问题总结一、SpringBoot项目搭建LayUI框架:二、引入css、js所遇到的问题:三、造成引入js和css问题的原因: 一、SpringBoot项目搭建LayUI框架: 1、首先在...

    一、SpringBoot项目搭建LayUI框架:

    1、首先在官网下载LayUI前端文件,解压。
    2、将解压后的文件夹里找见存放css和js的layui文件夹,将整个文件夹复制粘贴到src/main/resources中的static文件夹下。
    具体目录结构如下图:
    在这里插入图片描述
    3、在src/main/webapp或者src/main/resource/templates下创建index.html,编写index.html文件,内容如下图。
    在这里插入图片描述
    4、保存完成后点击运行项目,运行结果如下图。
    在这里插入图片描述

    二、引入css、js所遇到的问题:

    1、html 文件放在resources/templates下,或者在src/main/webapp下。
    2、js/css 等静态资源放在resources/static下。
    项目目录如下图:
    在这里插入图片描述
    3、我在使用html引入layui的js和css时,遇到了html无法引入css和js。

    三、造成引入js和css问题的原因:

    在引入js和css时,使用相对路径,路径不能使用官网上现成模版里的../layui/css/layui.css../layui/layui.js,我们自己在使用的时候,需要改为./layui/css/layui.css./layui/layui.js。这样就能正常引入css和js文件。

    温馨提示:该文章为本人自己创作,转载请标明出处。感谢各位!!!谢谢大家!!!
    QQ:961094233
    邮箱:961094233@qq.com

    展开全文
  • LayUI框架示例整合

    2019-06-21 17:07:40
    自己写的前端LayUI框架示例整合,适合小白学习(大神勿喷。谢谢)
  • Layui框架实现图片上传

    万次阅读 多人点赞 2019-08-02 17:05:47
    Layui框架实现图片上传 前言: 一直以来,图片上传总是件很麻烦的事。最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发。 layui图片上传和传统的图片上传不同,它并不予表单元素并存,而是...
  • Layui框架整理

    2021-03-23 17:48:31
    Layui框架整理loading框laydate 日期选择 开始时间和结束时间弹窗打开关闭方式 loading框 var loading = layer.load(2, { shade: false, time: 2*1000 }); layer.close(loading); laydate 日期选择 开始时间和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,020
精华内容 2,008
关键字:

layui框架