Layui框架基本使用
文章目录
- 一、前言
- 二、引入模板
- 1、去gitub仓库下载layui开发包
- 2、引入模板
- 3、验证
- 三、布局
- 1、布局容器
- 2、栅栏系统
- 四、颜色
- 五、图标
- 六、动画
- 七、按钮
- 八、表单框
- 九、导航
- 1、普通导航
- 2、面包屑
- 十、选项卡
- 十一、表格
- 十二、徽章
- 十三、时间线
- 十四、分页插件
- 十五、轮播图
一、前言
为后端量身定做的前端框架。
很遗憾在你下线之后才去了解你
二、引入模板
1、去gitub仓库下载layui开发包
下载地址
2、引入模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用 layui</title><link rel="stylesheet" href="./layui/css/layui.css"><title>layui</title>
</head>
<body>
<script src="./layui/layui.js"></script>
<script>layui.use(['layer', 'form'], function () {var layer = layui.layer, form = layui.form;layer.msg('Hello World');});
</script>
</body>
</html>
3、验证
网页中心出现内容时，说明引入成功
三、布局
布局与bootstrap十分相似，就是类名前加上了layui（不多赘述）
可以参考：bootstrap学习笔记
1、布局容器
页面的所有内容都放在此容器中
layui-container:固定宽度并支持响应式布局的容器 (两侧会有留白)
layui-container-fluid:100%宽度
2、栅栏系统
<div class="layui-container" style="background-color: #00F7DE;height:220px"><div class="layui-row"><div class="layui-col-lg2" style="background-color: #666666">2</div><div class="layui-col-lg4" style="background-color: #FF5722">4</div></div><div class="layui-row"><div class="layui-col-lg2" style="background-color: #01AAED">2</div><div class="layui-col-lg4" style="background-color: #cccccc">4</div></div>
</div>
四、颜色
layui 内置了七种背景色，以便你用于各种元素中，如：徽章、分割线、导航等等
赤色：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"
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用 layui</title><link rel="stylesheet" href="./layui/css/layui.css"><title>layui</title>
</head>
<div class="layui-container" style="background-color: #00F7DE;height:400px"><div class="layui-bg-black">雅黑</div><div class="layui-bg-orange">橙色</div><div class="layui-bg-red">赤色</div><div class="layui-bg-green">墨绿</div><div class="layui-bg-cyan">藏青</div><div class="layui-bg-blue">雅黑</div>
</div>
<body>
<script src="./layui/layui.js"></script>
<script>layui.use(['layer', 'form'], function () {var layer = layui.layer, form = layui.form;layer.msg('Hello World');});
</script>
</body>
</html>
效果：
五、图标
layui有许多好看且实用的小图标
例：
实心爱心：layui-icon-heart-fill
空心爱心：layui-icon-heart
笑脸表情：layui-icon-face-smile
赞：layui-icon-praise
利用jq实现简单的 关注效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用 layui</title><link rel="stylesheet" href="./layui/css/layui.css"><script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
</head>
<div class="layui-container" style="height:400px"><div><i class="layui-icon layui-icon-face-smile" style="font-size: 20px;color: red"></i></div><div><button class="layui-icon layui-icon-heart" style="font-size: 20px;color: red" id="guanzhu">点击关注</button><button class="layui-icon layui-icon-heart-fill" style="font-size: 20px;color: red" id="guanzhu0" hidden="hidden">关注成功</button></div>
</div>
<body>
<script src="./layui/layui.js"></script>
<script>layui.use(['layer', 'form'], function () {var layer = layui.layer, form = layui.form;layer.msg('Hello World');});$("#guanzhu").click(function () {$("#guanzhu").hide();$("#guanzhu0").show();})
</script>
</body>
</html>
六、动画
类型：
顶部往下滑入：layui-anim-down
微微往下滑入：layui-anim-downbit
底部往上滑入：layui-anim-up
微微往上滑入：layui-anim-upbit
平滑放大：layui-anim-scale
弹簧式放大：layui-anim-scaleSpring
平滑放小：layui-anim-scalesmall
弹簧式放小:layui-anim-scalesmall-spring
渐现：layui-anim-fadein
渐隐：layui-anim-fadeout
360度旋转：layui-anim-rotate
循环动画：追加：layui-anim-loop
七、按钮
标准按钮：layui-btn
主题按钮：
原始： class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 :class="layui-btn layui-btn-disabled"
尺寸:
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
圆角按钮：layui-btn-radius
<div class="layui-container" style="height:400px"><button type="button" class="layui-btn layui-btn-lg">大标准按钮</button><button type="button" class="layui-btn-warm">暖色钮</button><button type="button" class="layui-btn-disabled">禁用按钮</button><button type="button" class="layui-btn-warning layui-btn-radius">警告按钮且圆角</button>
</div>
按钮组：
<div class="layui-btn-group"><button type="button" class="layui-btn">增加</button><button type="button" class="layui-btn">编辑</button><button type="button" class="layui-btn">删除</button></div><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button></div><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button></div>
八、表单框
注意：依赖加载模块 form
layui.use(['layer', 'form'], function () {var layer = layui.layer, form = layui.form;
<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码框</label><div class="layui-input-inline"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">辅助文字</div></div><div class="layui-form-item"><label class="layui-form-label">选择框</label><div class="layui-input-block"><select name="city" lay-verify="required"><option value=""></option><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">复选框</label><div class="layui-input-block"><input type="checkbox" name="like[write]" title="写作"><input type="checkbox" name="like[read]" title="阅读" checked><input type="checkbox" name="like[dai]" title="发呆"></div></div><div class="layui-form-item"><label class="layui-form-label">开关</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">单选框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>
九、导航
1、普通导航
依赖加载模块：element
layui-this：默认选中
layui-nav-child：二级菜单
<ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="">C++</a></li><li class="layui-nav-item layui-this"><a href="">PHP</a></li><li class="layui-nav-item"><a href="">Python</a></li><li class="layui-nav-item"><a href="javascript:;">Java</a><dl class="layui-nav-child"> <!-- 二级菜单 --><dd><a href="">SE</a></dd><dd><a href="">EE</a></dd><dd><a href="">ME</a></dd></dl></li><li class="layui-nav-item"><a href="">C#</a></li></ul>
水平垂直侧边导航栏：
垂直导航需要追加 class：layui-nav-tree
侧边导航需要追加 class：layui-nav-tree layui-nav-side
2、面包屑
<span class="layui-breadcrumb" lay-separator="|"><a href="">加粗</a><a href="">斜体</a><a href="">标题</a><a href="">删除线</a><a href="">有序</a><a href="">无序</a><a href="">代办</a>
</span>
十、选项卡
依赖模块：element
<div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">内容1</div><div class="layui-tab-item">内容2</div><div class="layui-tab-item">内容3</div><div class="layui-tab-item">内容4</div><div class="layui-tab-item">内容5</div></div>
</div>
添加lay-allowClose="true 即 允许删除
十一、表格
layui-table：基础表格
lay-even：用于开启 隔行 背景，可与其它属性一起使用
lay-skin="属性值" line （行边框风格）row （列边框风格）nob （无边框风格） 若使用默认风格不设置该属性即可
lay-size="属性值" sm （小尺寸）lg （大尺寸） 若使用默认尺寸不设置该属性即可
十二、徽章
<div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户管理<span class="layui-badge-dot"></span></li><li>最新邮件<span class="layui-badge">99+</span></li></ul><div class="layui-tab-content"></div>
</div>
十三、时间线
<ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">2022/1/12</h3><p>学习layui<br>好玩<br>好用 <i class="layui-icon"></i></p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">2022/1/13</h3><p>使用layui<em>完成项目</em></p><ul><li>****</li><li>***</li></ul></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">2022/1/14</h3><p>项目发布<br>感谢<br>再次感谢<br>啦啦啦</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">过去</div></div></li></ul>
十四、分页插件
依赖：laypage模块
<div class="layui-container" style="height:400px"><div id="test1"></div>
</div>
<body>
<script src="./layui/layui.js"></script>
<script>layui.use(['layer', 'form','element','laypage'], function () {var layer = layui.layer, form = layui.form, element =layui.element,laypage=layui.laypage;//执行一个laypage实例laypage.render({elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号,count: 50 //数据总数，从服务端得到});});
</script>
十五、轮播图
依赖模块：carousel
<div class="layui-container" style="height:400px"><div class="layui-carousel" id="test1"><div carousel-item><div>条目1</div><div>条目2</div><div>条目3</div><div>条目4</div><div>条目5</div></div></div><!-- 条目中可以是任意内容，如：<img src=""> -->
</div>
<body>
<script src="./layui/layui.js"></script>
<script>layui.use(['layer', 'form','element','laypage','carousel'], function () {var layer = layui.layer, form = layui.form, element =layui.element,laypage=layui.laypage,carousel=layui.carousel;//执行一个carousel实例carousel.render({elem: '#test1',width: '100%' //设置容器宽度,arrow: 'always' //始终显示箭头//,anim: 'updown' //切换动画方式});});
</script>
Layui框架基本使用相关推荐
- Layui框架 中table解决日期格式问题
Layui框架 中table解决日期格式问题 参考文章: (1)Layui框架 中table解决日期格式问题 (2)https://www.cnblogs.com/slacker-z/p/996347 ...
- php layui 框架,快速上手前端框架layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 一.介绍 在使用layui之前,我们先要了解一下la ...
- layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
- 修改layui框架html,layui框架如何设置分页？（方法介绍）
layui框架如何设置分页?下面本篇文章给大家介绍一下layui框架中设置分页的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 具体步骤如下: 1.从 官方文档 - 内置模块 ...
- layui table reload post请求_如何实现在Layui框架中完成父窗口刷新（更新）
最近有个项目使用Layui框架进行后端系统的界面搭建,其中Layui框架中的Layer组件在项目中会用得非常多.且有些功能会遇到子窗口完成数据的提交后,进行关闭同时会刷新父窗口的数据,所以此文章分享一 ...
- layui框架使用总结
最近一个后台系统使用layui框架做的,遇到好多坑在这里总结一下. 1.layui的基本使用,下面的在他下面写,其他的事件也要在这个里面写 行内onclick事件是监听不到写在下面这种代码中的 ...
- 使用layui框架时，select的onchange事件没有生效。
使用layui框架时,select的onchange事件没有生效. 首先,select一定要放在<form class="layui-form" ></form& ...
- layui搭建的php后台,使用layui框架搭建后台布局
摘要:主要借助layui框架,方便实现后台的搭建.上传参数: 主要借助layui框架,方便实现后台的搭建. 上传参数: layui.use('upload', function(){ var uplo ...
- layui框架轮播图实现轮播图片自适应视口缩放
一点JS也不懂,利用layui现成的框架轮播组件,简单的实现了layui框架轮播图自适应视口而缩放效果. 以下是代码: <section><div class="layui ...
- dedecms织梦后台模板layui框架-20171126更新
后台效果 更新日记 2017/11/26 修正gbk版后台删除文档报错问题: 2017/11/22 修正部分Linux下后台-系统-系统基本参数不正常问题: 2017/09/13 修 ...
最新文章
- 12 个超燃的 IntelliJ IDEA 插件！
- 【 FPGA 】半带 FIR 滤波器（Half-band FIR Filter）
- 在阿里，我们这样帮助用户实现业务云原生化迁云
- 计算机基础ABCDEF,计算机应用基础-在线作业abcdef（76页）-原创力文档
- idea里自动创建构造函数
- Win 11 真的要来了！微软宣布 Win10 将于 2025 年终止支持！
- java正则表达式用法示例_Java正则表达式教程及示例
- Java中的简单REST客户端
- 数字倒序Java_怎么用Java编写一个程序,将输入的数字重新倒叙排列?
- 瞬时电压示波器matlab,示波器测量瞬时电压的方法与步骤
- 大气压力换算公式_压力公式换算
- qqxml图片代码_QQxml卡片代码合集超大图
- 误差状态方程与雅可比矩阵
- Mac OS X 平台有哪些优秀应用可以将视频转成 GIF？Mac视频转gif软件推荐
- Spark写入Hudi报分区列乱码问题java.net.URISyntaxException: Illegal character in path at index 46:
- android 开发 安卓系统主题设置
- 微信公众号采集，历史文章采集，万能key采集，点赞阅读评论采集
- 酒店预订分销系统和分销商
- VS2017+VUE创建项目爬坑
- mysql实现统计查询_MySQL 统计查询实现代码