layui使用
个人感觉layui比bootstrap好用,它里面封装了很多东西,而且感觉比bootstrap更加美观(可能国人的框架更符合国人)
首先我们要去她的官网或者去github上面去下源代码,文件不大就几兆,我一般去官网下载下来就可以了(个人感觉更方便)。
layui官网:https://www.layui.com/
layui的github:https://github.com/sentsin/layui/
我们下载好了压缩包之后就进行解压,从下载的压缩包后面我们可以知道layui的版本,解压后就是这个样子:
我们只用layui这个文件夹就可以了。
把layui文件夹复制到自己的项目里面去:
这样我们就可以开始使用layui提供的样式和一些javascript。
建立一个页面
我们进入官网后点击示例,选择自己想要的页面(我选择的是form表单里面),点进去以后可以预览到效果:
可以根据自己的需求进行筛选,选定好了之后就点击查看代码就可以看到代码,这时我们只需要Ctrl+A Ctrl+C把代码给复制了,然后再去自己项目里面新建一个html页面,我是放在html文件夹里面名字是demo,粘贴(Ctrl+V)进去,注意:如果新建的页面有html、body等标签应先删除再进行粘贴不然会报错
这时我们先用浏览器打开一下观察一下效果:
我们要更改两个地方:
1.
这里是layui样式的默认路径,这里我们要改成自己的路径,根据我demo.html页面的位置我的路径是:
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
…表示返回上一层,我的页面是在html文件夹里面的,我们要访问layui文件夹
2.
这是layui的js默认路径,我的路径是:
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
这里跟上面的css不同是因为文件存储位置不同:
改好了后我们在次用浏览器打开就实现了预览的效果:
注意事项
引入layui里面的js时有两种引用的方法,一种是像我们之前那样引入的是layui.js是模块化的加载,最终再使用的时候才会自动加载,这种方式要在<script标签里面写出要用到的模块:
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
,不然会发现使用不了一些东西,这也是官方推荐的方法。
另一种是在引入时一次性把模块全部导入,就是把上面的layui.js改为layui.all.js,这样使用是全部模块一次性导入的,虽然不用再声明使用的模块,但是官方不推荐这样用。经过我亲身体验也觉得不要这样用,这样会导致页面加载很明显的卡顿,而且加载图片时会更慢,严重影响用户体验。
遇到问题
开发过程中遇到问题,首先得详细查看自己使用的那一部分的相关文档,大部分问题是文档漏看了没看完等问题,如果看了文档还没有解决推荐你去Fly社区去搜一下(现在社区已经关闭了。。。),有问题加layui的交流群去问下群里面的大佬,问问题时没人解答的现象很正常,可能是太简单的问题不想回你,也可能是被其他话题给遮住了,这时候等大佬们聊完天再去问问。有时大佬让你贴代码的时候不要直接粘源码发群里面!!! 可以截图发群里面,我喜欢用QQ截图(Ctrl+Alt+A),截完图后可以把重点部分用红色框框出来,这时大佬看你这么上道肯定会给你解答问题了。真正需要源码的时候用个txt文件装起来,不要图省事直接把整个html拉进去。。
说了这么多上个交流群图(我不是群主。。
几个交流群好像就5群比较活跃,如果人满了的话会提示加其他群聊。
遇到问题时请教别人时态度要好,我遇到好几个进群问问题没人理就骂骂咧咧的退群了。。
借鉴下学过的《送东阳马生序》:先达德隆望尊,门人弟子填其室,未尝稍降辞色。余立侍左右,援疑质理,俯身倾耳以请;或遇其叱咄,色愈恭,礼愈至,不敢出一言以复;俟其欣悦,则又请焉。故余虽愚,卒获有所闻。
文章若有帮助,烦请扫码支持