🦁Layui
🦁什么是Layui
Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，它更多是面向于后端开发者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
🦁layui的优缺点
优点：
🦁layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
🦁layui是提供给后端开发人员最好的ui框架，基于DOM驱动，只要不涉及到交互layui还是很不错的
缺点：
🦁layui出现较迟，想必其他前端框架来说还是不太成熟。现在已更新到2.X版本了
🦁在实现前端交互上比较麻烦，因为页面的增删改查都需要查询DOM元素
🦁layui的元素
布局（栅格、后台布局）、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等。
🦁layui的模块
layui 提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，其中包括：layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。
🦁将Layui加入web项目中
🦁网址：
官方网站：https://www.layui.com/（已下线）
参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）
🦁下载后即可解压：
🦁导入web项目中
🦁建一个静态资源包，将我们的资源导入
<!-- 引入 layui.css --> <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/layui/css/layui.css"> <!-- 引入 layui.js --> <script src="${pageContext.request.contextPath }/static/js/layui/layui/layui.js"></script>
🦁代码及效果图：
<body> 弹屏:<input id="inputId" value="默认：我是懒大王"><button id="btnId">去死吧美羊羊</button> <script> layui.use(['layer' , 'jquery'], function(){ var layer = layui.layer ,from = layui.from ,$ = layui.jquery; $("#btnId").click(function(){ layer.msg($("#inputId").val()); }); }); </script> </body> </html>
