layui入门（1）：什么是layui以及lanyui的下载与使用
首先放上layui的官网地址
layui官网链接: https://www.layui.com/.
1、什么是layui
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
2、怎么下载layui
下载方式有3种：
1、官网下载
1、git下载
1、npm下载
下载方式官网都有写，我就不多介绍了
3、怎么使用呢
首先我们先下载号layui ，将其完整地部署到你的项目目录
如图：
](https://img-blog.csdnimg.cn/20200529104831896.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbmdsaXM=,size_16,color_FFFFFF,t_70)
在软件中是这样显示的：
然后在我们项目中导入layui：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入css-->
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="./layui/layui.all.js"></script>
<script type="text/javascript">
//使用
console.dir(layui);//引入文件后，存在这样的一个变量。
layui.layer.msg('您好，欢迎您使用本网站');
</script>
</html>
这样我们就可以到网页控制台查看下我们的layui里面有什么东西
这样我们就把layui部署到我们项目中了，我们就可以开始使用了
我们先来试用一下
我们先试下时间线
话不多说直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入css-->
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规时间线</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
layui起步出血
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="./layui/layui.all.js"></script>
<script type="text/javascript">
//使用
console.dir(layui);//引入文件后，存在这样的一个变量。
layui.layer.msg('您好，欢迎您使用本网站');
</script>
</html>
上图：
当然，如果觉得时间线前面的图标觉得不好看，或者说时间先的内容不喜欢，想要添加一个手风琴，我们就可以到官网中查找我们想要的东西。
我直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入css-->
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规时间线</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-collapse" lay-accordion=""> <!--添加了手风琴 -->
<div class="layui-colla-item">
<h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
<div class="layui-colla-content layui-show">
<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
<br>
因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
<div class="layui-colla-content">
<p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
<div class="layui-colla-content">
<p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">福建在哪里？</h2>
<div class="layui-colla-content">
<p>man！ 所以这个问题不要再出现了。。。</p>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
</li>
<li class="layui-timeline-item">
<!-- 更改了时间线前面的图标 -->
<i class="layui-icon layui-icon-heart-fill"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
layui起步初学。
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="./layui/layui.all.js"></script>
<script type="text/javascript">
//使用
console.dir(layui);//引入文件后，存在这样的一个变量。
layui.layer.msg('您好，欢迎您使用本网站');
</script>
</html>
上图：
5173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
