Layui和Bootstrap对比

　　做前端的朋友们肯定都用过或听过Bootstrap和LayUi，虽然我不是专业的前端程序员，但是对于前端还是颇有研究，闲暇事情会经常研究各种前端框架的源码，一来可以借鉴优秀框架的思想，二来可以顺便学习可以提高自己。

　　Bootstrap的定义

　　Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

　　Twitter公司维护的框架，是很多做前端的最爱，尤其是响应式网站，第一个想到的框架就是Bootstrap，Bootstrap的栅格系统很经典，现在很多的团队目前用的框架也是借鉴了Bootstrap的思想。

　　Layui的定义

　　layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

　　layui是一款国产的不可多得的优秀框架，我们团队的一些内部管理系统项目偶尔也会用到这款框架，我曾经研究这个框架代码，代码写得很优雅，整体设计堪称大师级别，作者贤心绝对是前端大神级的人物。

　　虽然说网上有很多这两款框架的对比，但是基本都是互相复制，完全不是自己的体验，下面就这两款框架说我个人的一点看法。

　　一、知名度(百度指数)

　　作为程序员，很多事情都喜欢用数据说话，看百度指数，百度指数能很好的衡量一个框架的收欢迎程度。

　　Bootstrap的整体日均百度指数是8,975，layui的整体是日均指数是7,605，可能大家不知道这个数字到底是什么程度?那么，我给大家举一个例子，jquery框架够出名了吧!基本所有前端都会用这个框架，jquery的整体日均百度指数为5,223，这下大家明白了吧!layui和Bootstrap的受欢迎程度不亚于jquery。

　　Bootstrap比layui的指数高出1000多个点，但是有一点需要明白， layui是2016年后才正式出来，Bootstrap的1.0版本在2012年就发布了，也就是layui在短短的3年时间达到这种程度，可以反映框架的受欢迎程度。

　　二、使用范围

　　layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。

　　layui 非常适合做后台框架。作者“闲心”都说了，开发这个框架的出发点是为了满足服务端程序员的需求。所以你懂得，layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。

　　layui封装了很多后台系统常用的效果，很多基于thinkphp的后台系统都会用 layui作为框架，对于后端程序员来说，轻轻松松就可以弄一个很美观的后台界面出来，省事省力，毕竟很多后端程序员对界面ui的掌控是非常有限的。

　　目前很流行的“宝塔面板”的后台管理就是用的layui开发的。

　　bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错， 很适合做响应式网站，同时满足PC端和移动端效果，虽然很多公司前端都会有自己的一套框架，但是据我所看的很多大型公司的前端页面的css文件，但凡响应式框架都是借鉴了bootstrap的思想。

　　当然，bootstrap也可以用于后端，但是相比layui的满汉全席，bootstrap更适合有一定前端能力的开发人员，可以自由定制自己的组件，国内知名的PageAdmin网站系统的后台就是采用bootstrap的框架。

　　三、美观程度

　　这个每个人的审美还真不一样，就拿做后台框架这块来说吧，我个人感觉是layui做的界面色彩鲜艳，bootstrap做的界面色调简洁，后台系统一般都是表单界面居多，下面截图对比。

　　layui的表单界面截图：

　　bootstrap的表单界面截图：

　　从上面的表单简单的对比可以看出layui的表单比bootstrap色彩大胆很多。

　　四、大小程度

　　layui是轻量级。

　　bootsrap因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余。

　　总结：

　　这两款框架都是很优秀的前端框架，没有孰好孰坏，关键和你项目吻合，并符合你个人的爱好。

　　我个人的观点的是：Bootstrap框架做前台模板，Layui框架做后台模板。

------------------------------------------------

　　layui和bootstrap 对比

　　这两个都属于UI渲染框架。

　　layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看。

　　bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过。

　　适用范围不一样

　　layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。

　　做后台框架。

　　作者“闲心”都说了，开发这个框架的出发点是为了满足服务端程序员的需求。所以你懂得。

　　layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的。

　　bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。

　　做网站不错。

　　如果是类似官网，且需要同时满足PC端和移动端效果，bs表现很好。

　　但是如果是要交互的网站，比如商城之类，vue显然更好，前后端分离，。

　　大小不一样

　　layui 轻量级。

　　bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余。

　　个人觉得layui的样式不错，在开发小型网站时可以考虑。博客也可以考虑。

---------------------------------------------------------

　　前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。

　　要做WEB前端，就需要知道前端到底是什么，需要学习那些知识;前端至少要懂的三个部分：HTML，CSS，JavaScript(简称JS)，那首先先明确这三个概念：

　　HTML负责结构，网页想要表达的内容由html书写。

　　CSS负责样式，网页的美与丑由它来控制

　　JS负责交互，用户和网页产生的互动由它来控制。

　　web前端发展至今，演变出了无数的库和框架;说到库第一时间想到的是不是jquery?在小颖刚接触库的时候也是从jQuery开始的;今天我们就来说说前端发展到现在都有哪些好用的库框架;

　　下面给大家介绍一下平常所用的PC前端UI框架，作为一个新手来说，用起来很有感觉。

　　1.Bootstrap中文网

　　Bootstrap，让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件，还有强大的支持十几的JavaScript、jQuery插件以及组件定制等。

　　Bootstrap中文网地址：http://www.bootcss.com/

　　2.Layui

　　layer是一款口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

　　Layui官网地址：https://www.layui.com/

　　3.ElementUI

　　Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。适合于Vue的UI框架;

　　官网地址：http://element-cn.eleme.io/#/zh-CN

　　Echarts

　　提供商业产品常用图表，底层基于ZRender(一个全新的轻量级canvas类库)，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

　　官网：https://echarts.apache.org/zh/index.html