了解easyUI、Bootstrap、layui三种框架

一、ui框架

ui框架目前了解的版本有三种：easyui、bootstrap、layui。

版本	年份	费用
easyui=jquery+html4（用来做后台的管理界面）	2016	不要钱
bootstrap=jquery+html5	2016-2018	要钱
layui	2018-2019	不要钱

1、easyui

easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。easyui框架提供了创建网页所需的一切，帮助您轻松建立站点。
官方网站链接: http://www.jeasyui.net/.
下面两张官网截图：

1.easyui的内容

• easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
• easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
• 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
• HTML 网页的完整框架。
• easyui 节省了开发产品的时间和规模。
• easyui 非常简单，但是功能非常强大。

2.缺点

（1）界面看起来并不美观，只常用于后台的管理界面，不支持响应式。

2、bootstrap

官方网站链接: https://www.bootcss.com/.
下面两张官网截图：


Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

• 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
• 浏览器支持：所有的主流浏览器都支持 Bootstrap。
  Internet Explorer Firefox Opera Google Chrome Safari
• 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
• 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
• 它为开发人员创建接口提供了一个简洁统一的解决方案。
• 它包含了功能强大的内置组件，易于定制。
• 它还提供了基于 Web 的定制。
• 它是开源的。

1.Bootstrap包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap插件部分详细讲解。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

2.缺点

（1）对于有特殊需求的使用者，bootstrap框架会对其带来较大的麻烦，需要做大量的css重写来改善非bootstrap“风格”的样式，导致该网站失去使用框架的意义。
（2）会有兼容问题，对底版本的浏览器兼容性不太好，页面显得更加死板，影响用户体验。
（3）js插件在导航页面直接切换到相应位置中，需要用js丰富它的内容，否则效果像是一个锚点，并没有滚动动画，不能尽如人意。
（4）定制会产生大量代码冗余，使用者利用css把原有的样式覆盖，当修改较多时被覆盖的代码没有了使用价值。
（5）Bootstrap框架设计使得HTML不再是语义及表现和内容分离的，最终会导致一堆充斥着class的DOM元素，不遵循最佳实践。部分开发人员会觉得相当刺眼，因为对扩展性，重用性和维护更是个挑战。

3、layui

官方网站链接: https://www.layui.com/.
下面两张官网截图：


layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

1.layui的内容

• 是基于原生html/css/js的前端框架(多用于界面搭建)
• 其实比较容易上手使用的，学习门槛比较低
• 极简主义(其所有空间的设计都比较符合现代审美观，极简，扁平化等)
• 体积小巧，但组件丰富.非常适合界面的快速开发

2.缺点

（1）layui出现较迟，想必其他前端框架来说还是不太成熟。现在已更新到2.X版本了。
（2）在实现前端交互上比较麻烦，因为页面的增删改查都需要查询DOM元素。

二、为什么要学习easyui

从效果来看

easyui的界面效果要远远差于bootstrap
跟layui比，界面效果也更差

从金钱的角度上

开发首先会排除掉bootstrap

从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑

easyui都要优于layui

从公司的角度考虑选用那个框架

成本、公司的后端技术人员前端功底、前端的社区活跃度

三、easyui下载

链接: http://www.jeasyui.com/download/index.php .

四、总结

我是南橙，一个逐渐秃头的橙子Orange。