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 ,将其完整地部署到你的项目目录
如图:
在软件中是这样显示的:
然后在我们项目中导入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>
上图: