LayUI(一)学习笔记

最新推荐文章于 2024-04-18 17:17:12 发布

M1kasal

最新推荐文章于 2024-04-18 17:17:12 发布

阅读量697

点赞数

分类专栏： LayUI

本文链接：https://blog.csdn.net/Makasa/article/details/104977815

版权

这篇博客介绍了LayUI前端框架的基础知识，包括页面元素如布局、颜色、字体图标、动画、按钮、导航、Tab选项卡、进度条、面板和时间线的使用方法，适合初学者入门。

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

前言

因为公司用的前端框架是LayUI,之前都没有接触过,所以最近都在自学LayUI，可以直接通过官方文档进行学习，学习之后发现其实所有前端框架都差不多,以下为笔记内容.

一、简要介绍

概念

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，其他UI框架:Bootstrap . Element . EasyUI . LayUI等等.

LayUI的使用

1）官网首页下载：https://www.layui.com/

在这里插入图片描述
目录结构：

2）引入layui核心文件:

layui/css/layui.css // layui中内置的样式
layui/layui.js //layui中核心的js插件(模块化使用) layui/layui.all.js // layui中所有的js

3）示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<!-- 引入layui的css样式 -->
	<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>

<!-- 注意：
1. 在JS引入时 若引入多个JS, JS之间存在依赖性.则优先引入被依赖的JS
2. 一般引入JS,在body的最后面引入,因为代码自上而下的执行,这样可以等页面的DOM元素都加载了引入JS,避免不生效和异常问题-->
	
	<!-- 引入layui中JS -->
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript">
		//初始化layui模块
		layui.use(['form','jquery'],function(){
		//初始化模块的对象
		// 初始化jquery对象
		var $ = layui.jquery;
		//初始化form表单模块对象
		var form = layui.form;
	});
	</script>
</body>
</html>

二、页面元素

1.布局

栅格系统：容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用.

栅格布局规则

1）采用 layui-row 来定义行

2）采用类似 layui-col-md** 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md* 代表的是不同屏幕下的标记（可选值见下文）变量**代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

3）列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

4）可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的内边距的间距和偏移(自身所在容器的12等份)。

5）最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局

2.颜色

在这里插入图片描述

样式	颜色
class=“layui-bg-red”	赤色,比较引人注意的颜色
class=“layui-bg-orange”	橙色,一般用于提示性元素
class=“layui-bg-green”	墨绿,通常用于按钮、及任何修饰元素
class="layui-bg-cyan "	藏青：侧边或底部普遍采用的颜色
class=“layui-bg-blue”	蓝色：比较适合一些鲜艳色系的页面
class=“layui-bg-black”	雅黑：通常用于导航
class=“layui-bg-gray”	银灰：背景、边框