前端UI框架Bootstrap、Foundation、Semantic UI、Pure和UIkit有什么区别
前端UI框架Bootstrap、Foundation、Semantic UI、Pure和UIkit有什么区别
这篇文章将为大家详细讲解有关前端UI框架Bootstrap、Foundation、Semantic UI、Pure和UIkit有什么区别,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
1.Bootstrap
Bootstrap是当前可用前端框架中无可争议的NO.1。鉴于其巨大的知名度,每天仍在不断增长,可以肯定,这个奇妙的工具不会让你失望。
创作者:Mark Otto and Jacob Thornton.
发布时间:2011年
当前版本:4.0
人气:GitHub上有122825颗星
描述:“简洁,直观且功能强大的前端框架,可实现更快、更轻松的网页开发。”
核心概念/原则:RWD和移动优先。
框架大小:578 KB(预编译的zip文件夹)
预处理器:Sass
响应:是的
模块化:是的
启动模板/布局:是的
图标集:不包括
附加功能/附加组件:没有捆绑,但有许多第三方插件可用。
独特的组件(与下面前端框架相比较):Jumbotron,Card
文档:非常好
定制:为网格系统和重启提供独立文件选项,使用Sass轻松定制;没有在线定制器
浏览器支持:最新版本的Firefox,Chrome,Safari,IE810-11-Microsoft Edge。
许可证:MIT
Bootstrap的注意事项
Bootstrap的主要优势在于其广受欢迎。从技术上讲,它不一定比其他的框架好,但与其他四个前端框架相比较,它提供了更多的资源(文章和教程,第三方插件和扩展,主题构建器等)。总之,Bootstrap无处不在。这是程序员继续选择它的主要原因。
2.Foundation
Foundation是顶部前端框架的第二大玩家。有了像ZURB这样坚实的后盾,这个框架有了一个真正强大的基础。毕竟,Foundation在包括Facebook,Mozilla,易趣,雅虎在内的许多大型网站上使用,还有国家地理等等。
创作者:ZURB
发布时间:2011年
当前版本:6
人气:GitHub上有27130颗星
描述:“先进的响应式前端框架”
核心概念/原则:RWD,移动优先,语义
框架大小:197.5 KB
预处理器:Sass
响应:是的
模块化:是的
启动模板/布局:是的
图标集:基础图标字体
附加功能/附加组件:是的
独特的组件:Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
文档:很好,有很多额外的资源可用。
定制:基本的GUI定制器
浏览器支持:Chrome,Firefox,Safari,IE9 +; iOS,Android,Windows Phone 7+
许可证:MIT
Foundation注意事项
Foundation是一个真正专业的前端框架,提供商业支持,培训和咨询服务。它还提供了许多资源,可帮助你更快,更轻松地学习和使用框架。
3.Semantic UI
Semantic UI是使构建网站更加语义化的框架。它利用自然语言原理,从而使代码更具可读性和可理解性。
创作者:Jack Lukic
发布:2013
当前版本:2.3
人气:GitHub上有40134颗星
描述:“基于自然语言有益原则的UI组件框架”
核心概念/原则:语义,tag ambivalence,可响应
框架大小:806 KB
预处理器:少
响应:是的
模块化:是的
开始模板/布局:是的,提供了一些基本的初学者模板
图标集:Font Awesome
附加功能/附加组件:否
独特的组件:Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
文档:非常好,提供组织良好的文档,另外还有一个单独的网站,提供入门指南,自定义和创建主题
定制:没有GUI定制器,只有手动定制
浏览器支持:Firefox,Chrome,Safari,IE10 +(IE9仅支持浏览器前缀),Android 4,Blackberry 10
许可证:MIT
关于Semantic UI的注意事项
Semantic是极具创新性和功能全面的前端框架。其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。
4.Pure
Pure是一个轻量级的模块化框架,用纯CSS编写,包含可根据需要一起使用或分开使用的组件。
创作者:雅虎
发布:2013
当前版本:1.0.0
人气:GitHub上有18375颗星
说明:“一套小而灵活的CSS模块,能够在每个Web项目中使用。”
核心概念/原则:SMACSS,极简主义
框架大小:3.8 KB缩小和gzipped
预处理器:无
响应:是的
模块化:是的
启动模板/布局:是的
图标集:无;可以改用Font Awesome
附加功能/附加组件:无
独特的组件:无
文档:很好
定制:基本的GUI皮肤生成器
浏览器支持:Firefox,Chrome,Safari的最新版本; IE7 +; iOS 6.x,7.x; Android 4.x
许可证:Yahoo! Inc. BSD
关于Pure的注意事项
Pure只为你的项目提供纯粹的开始式样。对于那些不需要全功能框架,但只有特定组件才能包含在其工作中的用户来说,它是理想之选。
5.UIkit
UIkit是一个易于使用且易于定制的组件的简明集合。虽然它不如以上框架那么受欢迎,但它提供了相同的功能和质量。
创建者:YOOtheme
发布:2013
当前版本:3.0.0
人气:GitHub上有11954颗星
描述:“用于开发快速而强大的Web界面的轻量级和模块化前端框架”
核心概念/原则:RWD,首先移动
框架大小:326.9 KB(压缩文件夹)
预处理器:少,Sass
响应:是的
模块化:是的
启动模板/布局:是的
图标集:UIkit带有自己的SVG图标系统和库,其中包含越来越多的轮廓图标
附加功能/附加组件:是的
独特的组件:文章,Flex, Cover, HTML编辑器
文档:很好
自定义:高级GUI定制程序仅在版本2(以前的版本)中可用
浏览器支持:Chrome,Firefox,Safari,IE9 +
许可证:MIT
关于UIkit的注意事项
UIkit已成功用于许多WordPress主题。它提供了一个灵活而强大的手动定制机制。(该框架的早期版本还提供了高级GUI定制工具。)
关于“前端UI框架Bootstrap、Foundation、Semantic UI、Pure和UIkit有什么区别”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
推荐阅读
-
基于springboot+bootstrap+mysql+redis怎么搭建完整的权限架构
-
怎么使用bootstrap制作form表单
-
bootstrap如何实现滚动条
-
bootstrap3和bootstrap2有哪些区别
bootstrap3和bootstrap2有哪些区别这篇文章主要介...
-
vue与bootstrap有什么不同
vue与bootstrap有什么不同这篇文章主要介绍“vue与bo...
-
如何解决swagger-bootstrap-ui升级Knife4j的文件下载乱码和Knife4j.txt问题
如何解决swagger-bootstrap-ui升级Knife4j的文件下载乱码和Knife4j.txt问题...
-
日期范围选择组件bootstrap-daterangepicker怎么用
-
bootstrap导航栏如何实现居中
这篇文章将为大家详细讲解有关bootstrap导航栏如何实现居中,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇...
-
bootstrap中怎么实现图片自适应
bootstrap中怎么实现图片自适应,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴...
-
bootstrap中怎么实现一个动态进度条效果
bootstrap中怎么实现一个动态进度条效果,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇...