大家好，我是TJ
一个励志推荐10000款开源项目与工具的程序员
大家好，这里是TJ君
今天TJ君给大家分享一款免费开源的前端WEB UI组件库，Layui
Layui采用轻量级的模块化规范，开发模式是原生态的HTML/CSS/JavaScript，相对来说较容易上手，哪怕初学者也可以轻松使用。
整体风格偏向简约，比较适合前端页面的快速构成。
使用时，只需要在页面中增加如下内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Start - Layui</title>
<link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- HTML Content -->
<script src="./layui/layui.js"></script>
<script>
// Usage
layui.use(function(){
var layer = layui.layer;
// Welcome
layer.msg('Hello World', {icon: 6});
});
</script>
</body>
</html>
TJ君给大家演示一下：
这样一个简单的表格组件包含各类筛选功能及增删改查，代码也就100-200行。
同时，Layui从布局框架开始，到颜色、按钮、表单、表格、菜单等，每一个组件API都有详尽的解释及示例，方便用户进行操作上手。
例如，以时间线效果为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="//unpkg.com/layui@2.9.8/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-timeline">
<div class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2023年，Layui 情怀版本 2.8.0 发布，新官网上线，且文档全部重写并开源。</div>
</div>
</div>
<div class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis layui-icon-face-cry"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2021年，Layui 原官网下线，此后 Layui 进入两年的低谷期。</div>
</div>
</div>
<div class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis layui-icon-fire"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2017年，Layui 里程碑版本 2.0.0 发布，此后 Layui 进入三年的高光期。</div>
</div>
</div>
<div class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2016年，Layui 首个版本发布</div>
</div>
</div>
<div class="layui-timeline-item">
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">最初，Layui 在爱与期许中孵化。</div>
</div>
</div>
</div>
</body>
</html>
最终实现效果如下：
对简约风前端框架感感兴趣的小伙伴，可以一试。下载地址：
GitHub地址：
https://github.com/layui/layui
往期推荐
点击下方卡片，关注公众号“TJ君”
每天了解一个牛x、好用、有趣的东东
