不管是在HTML、CSS还是JavaScript的前端开发过程中,一定有不少人总会觉得自己设计出来的界面缺乏美感,定义出的标签按钮等过于单调,整个界面没有什么设计感,这时,我们不妨借助一些组件或者工具,美化我们的界面。
而Layui便可以很好的帮助到我们。
一、Layui是什么?
Layui 是一套免费的开源 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。
Layui网址:Layui - 极简模块化前端 UI 组件库(官方文档)
谐音:类 UI | 用途:用于更简单快速地构建网页界面 |
环境:全部主流 Web 浏览器(IE8 以下除外) | 特性:原生态开发 / 轻量级模块化 / 外简内丰 / 开箱即用 |
二、使用步骤
1.下载和引入
可以在Layui的 官网首页 或 更新日志 页面下载到 Layui,它经过了自动化构建,更适合用于生产环境。目录结构如下:
layui/
├─css
│ └─layui.css # 核心样式库
└─layui.js # 核心模块库
另外,还有 Git 下载、npm 下载 和第三方 CDN 方式引入等方法,详情见Layui官网。
2.使用方法
这里以html为例,介绍如何在文件中引入Layui中的组件。
我们在本地下载了以后只需要在文件中引入即可:
<!-- LayUI的核心CSS文件 -->
<link href="../layui-v2.8.17/layui/css/layui.css" rel="stylesheet">
<!-- LayUI的核心JS文件(采用模块化引入) -->
<script src="../layui-v2.8.17/layui/layui.js" charset="utf-8"></script>
完成引入后,我们用Layui中的图标举例,
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="..//layui-v2.8.17/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<i class="layui-icon layui-icon-github"></i>
<div>
你可以去定义它的颜色或者大小,如:
<i class="layui-icon layui-icon-github" style="font-size: 60px; color: #1E9FFF;"></i>
</div>
</body>
</html>
最终结果:
由于Layui内的组件太多,这里就不一一举例了,其方法大同小异,具体使用方法Layui中也会有代码可供参考,标签、按钮、滑块、选择框、表格、菜单等等等等。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了对于Layui的使用,而Layui提供了大量种类和形式的组件让我们美化自己的页面,希望我的分享可以真实且有效的帮助到大家,诸如此类的第三方库和工具繁华多样,数不胜数,但其目的都是希望能给大家带来一些帮助。
感谢观看