莫方教程网

今天TJ君给大家分享一款免费开源的前端WEB UI组件库，Layui

Layui采用轻量级的模块化规范，开发模式是原生态的HTML/CSS/JavaScript，相对来说较容易上手，哪怕初学者也可以轻松使用。

整体风格偏向简约，比较适合前端页面的快速构成。

使用时，只需要在页面中增加如下内容

  
    
    
    
    
  
  
    
    <script src="./layui/layui.js"></script>
    <script>
    // Usage
    layui.use(function(){
      var layer = layui.layer;
      // Welcome
      layer.msg('Hello World', {icon: 6});
    });
    </script> 
  

TJ君给大家演示一下：

这样一个简单的表格组件包含各类筛选功能及增删改查，代码也就100-200行。

同时，Layui从布局框架开始，到颜色、按钮、表单、表格、菜单等，每一个组件API都有详尽的解释及示例，方便用户进行操作上手。

例如，以时间线效果为例：

  
  
  
  
  



  

    
    

      
2023年，Layui 情怀版本 2.8.0 发布，新官网上线，且文档全部重写并开源。
    
  
  

    
    

      
2021年，Layui 原官网下线，此后 Layui 进入两年的低谷期。
    
  
  

    
    

      
2017年，Layui 里程碑版本 2.0.0 发布，此后 Layui 进入三年的高光期。
    
  
  

    
    

      
2016年，Layui 首个版本发布
    
  
  

    
    

      
最初，Layui 在爱与期许中孵化。
    
  

 

最终实现效果如下：

对简约风前端框架感感兴趣的小伙伴，可以一试。下载地址：

GitHub地址：

https://github.com/layui/layui