Layui

Layui前端框架简述

前方高能预警 ！！！！

新手小白重现江湖 噔！噔！蹬！蹬！

小涛同志温馨提示：不是大神也不是大佬，只是一个学习后端，稍微了解前端的微不足道的程序员小白，时不时更新一些前端、后端知识，各位大佬多多点评、点评！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是Layui？

开源模块化前端UI框架，是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。

在这里对Layui的功能进行简单的使用，具体使用请参见Layui官网：Layui官方网站

二、使用Layui

使用Layui首先需要下载Layui，然后引入Layui的CSS和JS文件，如下，具体href根据自己实际存放的位置定义

<link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css" />  //css
<script src="layui-v2.5.7/layui/layui.js"  ></script>  //js

(1) Layui-按钮图标

简单按钮：

 <button  type="button" class="layui-btn" > 按钮</button>   //（1）
 <a href="http://www.baidu.com" class="layui-btn"  >一个可以跳转的按钮</a>  //（2）
 <div class="layui-btn" >div按钮</div>  //（3）

实现：

按钮的不同样式：

<button class="layui-btn" >默认</button>   //（1）
<button class="layui-btn layui-btn-primary" >原始</button>  //（2）
<button class="layui-btn layui-btn-normal " >百搭</button>  //（3）
<button class="layui-btn layui-btn-warm " >暖色</button>  //（4）
<button class="layui-btn layui-btn-danger " >警告</button>  //（5）
<button class="layui-btn layui-btn-disabled " >禁用</button>  //（6）

实现：

按钮不同大小格式：

<button class="layui-btn layui-btn-primary layui-btn-lg" >大型原始</button>  //（1）
<button class="layui-btn" >默认</button>  //（2）
<button class="layui-btn layui-btn-danger layui-btn-sm" >小型警告</button>  //（3）
<button class="layui-btn layui-btn-warm layui-btn-xs " >迷你暖色</button>  //（4）

实现：

按钮添加图标样式：

<button class="layui-btn layui-btn-primary" > //（1）
        <i class="layui-icon" style="font-size: 30px; color: green;" >&#xe684;</i>
</button>
<button class="layui-btn" >  //（2）
        <i class=