当前位置: 主页 > 前端开发

前端开发框架-web前端开发ui框架

发布时间:2023-02-11 10:15   浏览次数:次   作者:佚名

本来这篇文章是想围绕CSS框架来写的,但是由于目前JS+CSS模式的框架在业界遍地开花,而我又是靠着一点点JS知识,所以想专门针对CSS来写,所以终于来到这里。 大锅粗炖。 以下框架不分先后顺序,想到什么就写什么。

引导程序

先说说Bootstrap。 你大概猜到你会先说出来或者你肯定会有这个(呵呵)。 这显示了它的实力和框架的势头。 初入道时,我下定决心,代码的任何一个字母都自己敲出来,让自己成长。 于是,在身边各种小伙伴的引诱下,开始了Bootstrap之旅。 虽然我是设计+前端的人才前端开发框架,但老天爷只允许我会用PS和各种设计工具却没有给我和设计妹一样的审美,所以这也是我当初选择Bootstrap的原因之一. 自己做的东西可以在妹子面前装很强,但是时间长了,难免Bootstrap漂亮到让人恼火,还好每个版本都会有很多变化,而且不会让人觉得是自己造的。 该网站将与许多网站发生冲突。 Bootstrap的使用极其简单(这也可能是Bootstrap作者阅读了无数攻城勇士,了解他们痛苦的结果),以至于即使是一个小前端也能很快上手,几乎没有学习成本。

web前端开发ui框架_前端开发框架_web前端开发框架html5

官方网站:

中文官网:

Github:

总结:Bootstrap最大的优点就是非常流行。 人气就是你有问题,会有很多人帮你解决。 最新的V4版本也开始支持FlexBox布局,这是一个非常不错的升级体验。 缺点是类命名不够语义化,还有各种缩写,害得我是个没有文档的菜。 最近开始混APP。 是选框架的首选,之前做pc的时候没注意。 后来混了右键属性一看,瞬间一股凉风袭来。 Bootstrap 太小了,我不得不选择另一个框架。

用户界面

AUI2.0的重新架构完全基于项目开发的角度,着重解决布局样式,通过组件模块化辅助整体优化调整。 可以说2.0版本的AUI更适合项目开发。

web前端开发框架html5_web前端开发ui框架_前端开发框架

Github:

官方网站:

前端开发框架_web前端开发ui框架_web前端开发框架html5

总结:对我来说,这个框架有一个优点就是它是一个纯CSS框架。 之前用过Pure,有点JS能力。 如果不是复杂的效果,我可以找一个纯CSS框架自己修改。 现在CSS3也已经可以做到动画,效率,质量,高效,所以选择了这个CSS框架。 有一点我不满意的是,这个框架的文档真的很好,是什么?

AmazeUI

Amaze UI 是一个移动优先的跨屏前端框架。 ... Amaze UI基于移动优先(Mobile first)的理念,从小屏逐渐扩展到大屏,最终实现全屏适配,以适应移动互联网的趋势。 但其实我只是看中它能解决国产浏览器存在的跨屏适配和兼容性问题。

web前端开发框架html5_web前端开发ui框架_前端开发框架

官方网站:

Github:

总结:AmazeUI一般会加入更多符合中国市场特点的元素。 该框架很好地处理了跨屏和适配,并准备了一系列常用的Web组件以降低兼容性,适配各种键盘的加班狗的工作时间做出了很多贡献。 ,该框架还针对中文排版进行了优化,兼容主流中文浏览器,轻量级,不仅适用于桌面,也更适用于移动端,包括一些封装好的Widgets。 但是我也觉得AmazeUI的文档有点多,比如“人家不关心jQuery的流量”之类的,说实话,这里真的没什么,但是我从来不说(哈哈),代码而且设计感觉不太突出。

冻结的用户界面

专注于移动端的UI框架,基于腾讯手Q规范... FrozenUI提供的CSS组件是QQ会员前端开发团队使用的通用样式库。

前端开发框架_web前端开发ui框架_web前端开发框架html5

Github:

官方网站:

web前端开发ui框架_web前端开发框架html5_前端开发框架

总结:如果将 Frozen UI 与 APICloud 之类的东西结合起来用于混合应用程序,或者使用原生火鸡嵌套在应用程序中进行前端开发,那将是一件很酷的事情。 本框架支持android 2.3+、ios 4.0+兼容,或者作为Web App使用也是极好的选择。 从UI层面可以看出缺点。 谁让它诞生在QQ会员前端。

微界面

WeUI是一套符合微信原生视觉体验的基础样式库。 由微信官方设计团队针对微信内部网页和微信小程序设计,让用户的使用感知更加统一。

web前端开发框架html5_前端开发框架_web前端开发ui框架

Github:

演示:

总结:看完微信设计团队设计的这套DEMO,如果你想做微信公众号,这一定是首选。 该框架的缺点是框架本身应该没有考虑让用户在非微信场景下使用。

“SUI是一套基于bootstrap开发的前端组件库,也是一套设计规范,通过SUI可以很方便的设计和实现漂亮的页面。” 果然还是直接引用官方给的无聊广告拯救我的脑细胞(囧……)。 当然,正如广告所说,如果你以前使用过Bootstrap,你可以轻松切换到SUI。 这可能就是淘宝给前端屌丝的。 福利。

web前端开发ui框架_web前端开发框架html5_前端开发框架

Github:

官方网站:

web前端开发框架html5_前端开发框架_web前端开发ui框架

多用户界面

我以前一直用安卓系统。 后来看到IOS,决定换位思考一下。 不知道为什么每次调系统都喜欢苹果。 后来因为缺乏设计感,专门模仿IOS系统做了UI,但还是不喜欢。 能做的很好,无意中发现了MUI框架。 这个框架的魅力在于它的UI主要是为IOS设计的。 当然也补充了android特有的UI风格。 而MUI官方声称是为了进一步开发,发现作为APP使用也能提高用户的流畅度,然后尝试了解并使用一段时间。

前端开发框架_web前端开发ui框架_web前端开发框架html5

官方网站:

Github:

星星:2,450

总结:如前所述,本框架以两大系统为参照,对UI组件进行封装。 框架本身也有一个比较活跃的社区。 这不是一件好事。 这也是我特别关注的一点,关于开发应用的流畅度 当然我知道这是H5目前的劣势,但是看到官网给出的描述,还是试试看能不能期待中得到改善。 但是,它仍然需要借助 Webview 进行改进,而不是框架本身。

语义UI

倒数第二个是语义 UI。 正是因为Bootstrap,我才接触到这个框架。 Semantic UI在github上一上线就吸引了大批开发者的关注,以至于很多人将两者进行了各种批评和褒奖。 好坏不能单论,别人说三四句就竖起手指开始表扬。 用过之后感觉UI和Bootstrap差别不大,但是代码命名规范还是有很大区别的。 我认为语义 UI 只是想做一些不同的事情。 它的命名都是复合的,类名特别离散。 使用时一定要注意扩展或添加的类名与其类名冲突。

web前端开发框架html5_前端开发框架_web前端开发ui框架

官方网站:

Github:

web前端开发框架html5_前端开发框架_web前端开发ui框架

中文网站:

基础

Foundation被认为是框架行业的元老。 据说框架走的早,现在这个框架还这么火。 如果你比较在意Bootstrap开发的尴尬,那么可以考虑使用Foundation。 即使使用预定义的UI元素,也不会和其他网站过于相似,就像官方说的那样,给开发者一个更灵活的框架体验。

web前端开发框架html5_web前端开发ui框架_前端开发框架

官方网站:

Github:

工具包

UIkit是由YOOtheme团队开发的,在很多WordPress主题中都有使用(也就是说,如果你是一个WordPress爱好者,那么这个框架应该更适合进一步研究),并且框架可以通过GUI编辑器和手动编辑,所以它提供了灵活而强大的定制机制。 借助LESS、jQuery、normalize.css以及FontAwesome开源项目独有的特性,将框架集成为这样一个轻量级、模块化的前端框架。

前端开发框架_web前端开发框架html5_web前端开发ui框架

官方网站:

Github:

纯的

前端开发框架_web前端开发框架html5_web前端开发ui框架

我是在做管理系统的时候接触到这个框架的,选择使用是因为这个框架小巧纯CSS,没有过多的参与,可以快速和其他框架结合。

web前端开发框架html5_web前端开发ui框架_前端开发框架

官方网站:

Github:

基于Bootstrap深度定制的开源前端实践方案前端开发框架,助你快速构建现代多屏应用。

web前端开发框架html5_前端开发框架_web前端开发ui框架

官方网站:

Github:

拼图前端框架

用于前端开发的Jigsaw跨屏响应式布局CSS框架。 Jigsaw是一款优秀的响应式CSS前端开源框架,国内前端框架的开创者和领导者,自动适配手机、平板、电脑等设备,让前端开发像一样快乐、简单、灵活游戏。

web前端开发框架html5_web前端开发ui框架_前端开发框架

该框架节省了我们的时间,让我们能够在最短的时间内做出最好的效果。 以前觉得自己写CSS代码有点傻。 我觉得只有站在巨人的肩膀上,才能做出更好的作品。

官方网站: