关于Layui组件库的介绍

Viper 3

已于 2023-10-26 14:39:35 修改

阅读量96

点赞数

分类专栏：好物分享文章标签： layui 前端 html

于 2023-10-26 14:30:20 首次发布

本文链接：https://blog.csdn.net/dargon_11/article/details/134050550

版权

好物分享专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

文章目录

前言

一、Layui是什么？

二、使用步骤

1.下载和引入

2.使用方法

总结

前言

不管是在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>

最终结果：