前端ul框架个人分析

Posted 2021-01-15 xkhan

一、Bootstrap（v3.3.7）

官网：http://www.bootcss.com/

优点：

1）栅格系统（结构）

可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。栅格系统的本质就是通过CSS3的媒体查询实现的，Bootstrap将屏幕尺寸分为四类，超小屏幕<768px，小屏幕 平板>=768px，中等屏幕 桌面显示器>=992px以及大屏幕 大桌面显示器>=1200px。每一列又被平均分成了12格，每一个8.33333333%，12格就无限接近于100%。类前缀使用是掌握栅格系统最重要的部分，类前缀分四个超小屏幕.col-xs-*，小屏幕 平板.col-sm-*，中等屏幕 桌面显示器>.col-md-*以及大屏幕 大桌面显示器.col-lg-*。

2）CSS模块化（表现）

Bootstrap预先定义了很多CSS类，使用的时候直接给class赋予对应的类名即可。源码是基于最流行的CSS预处理脚本-Less和Sass开发的。你可以采用预编译的CSS文件快速开发，也可以从源码定制自己需要的样式。仅仅通过改变一个变量，可以很容易地为链接赋予正确的颜色。

3）javascript插件（交互）

Bootstrap的JavaScript插件非常丰富，既可以用现成的也可以自己扩充，Bootstrap提供了一个集成版的Bootstrap.js您可以直接拿过来使用也可以单个使用引入*.js即可。

JS插件优秀的地方在于，哪怕是不懂JS的开发人员也可以使用，只要按照官方文档提供的格式写即可，比如模态框，您只要按要求设置好class，data-toggle，data-target即可，一句JS都不用写，是不是很方便。

Bootstrap的插件开发模式基本都是相似的，先定义一个类，实现主体功能，然后是个Plugin函数，再把这个函数扩展到JQuery原型上，最后通过委托的方式给特定元素绑定事件。

缺点：兼容性

对IE兼容也存在不小的问题，Bootstrap将所有的元素盒模型都设置成了border-box，这是IE混杂模式下的盒模型，光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法，这些语法标签兼容性方面同样存在不小的问题，当然网上存在很多兼容IE的办法，但需要引入其他文件，有些还不小，势必导致加载速度变慢，影响用户体验。

Bootstrap对IE6，7的兼容性肯定不好，对IE8的支持也需要一些额外的文件。

IE8的媒体查询需要response.js的配合才能实现

Bootstrap不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

二、LayUI（v2.x）

官网：https://www.layui.com/

优点：经典模块化框架

1）该框架不依赖与其他的Js框架，虽然它有的模块需要JQuery

2）它是基于原生Js的，不需要去了解其他Js的框架或库，减少分析该框架的成本

3）该框架中关于css类的命名规范分为两种，一种是具体模块的css的命令，它遵循layui-模块-状态或类型，另一种是公共类（可以说是不具体属于哪一个模块的），它遵循layui-状态或类型。

4）相比bs来说较轻量。

5）有三个独立组件：layer（弹出层）  layDate（日期与时间选择）  layim（即时通讯）

缺点：

没有bs框架成熟，首个版本发布于2016年，网上查询相关资料，layui组件有很多问题，如laypage死循环问题。

总结：

1）Bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。适合做网站。如果是类似官网，且需要同时满足PC端和移动端效果，Bootstrap表现很好。

2）layui 更偏向与后端开发人员使用，在服务端页面上有非常好的效果。适合做后台框架。