前端工程师应该你知道的这些UI框架

[复制链接]
查看: 250|回复: 0

该用户从未签到

52

主题

52

帖子

277

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
277
发表于 2018-2-5 23:53:13 | 显示全部楼层 |阅读模式
1.Bootstrap
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。[
特点:Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等
Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括:
模式对话框、标签页、滚动条、弹出框等。
2.Amaze ui
Amaze UI 是中国首个开源 HTML5 跨屏前端框架,一个轻量级、Mobile first的前端框架, 基于开源社区流行前端框架编写。相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。
3.mui
最接近原生APP体验的高性能前端框架,是基于html5plus(简称5+或html5+)引擎的一个UI框架.
100k的js文件,60k的css文件。原生编写,不依赖任何三方框架,xcode和Android studio里所有原生控件都具备,精练的代码、适时的5+原生动画调用,达到原生应用的体验.编写一套代码,iOS、Android、浏览器、微信App、百度直达号、流应用全覆盖.
4.jQuery UI
jQuery UI是一款基于jQuery的开源Javascript框架,jQuery UI框架主要提供了用户交互、动画、特效和可更换主题的可视控件,让开发者可以更方便地实现网页交互界面,jQuery UI的整个框架比较庞大,但你也可以根据自己需要使用的功能生成适合自己的框架底层。jQuery UI界面设计非常漂亮,值得一试。
它是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。
jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。
5.Flat UI
Flat UI是一款基于Bootstrap的扁平化前端UI工具包,Flat UI的组件外观设计非常清新和漂亮,Flat UI的组件包含按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块等精美的元素。一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap 实现。这套界面工具包包含许多基本的和复杂的 UI 部件。
Flat UI的特点:
  • 包含很多基本的用户界面,同时也可以灵活创建更多自定义的UI界面组件
  • 包含丰富的矢量图标和符号
  • 自定义调色板
  • 基于HTML / CSS、JavaScript的布局

6.Frozen UI
FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。遵循手Q样式规范,基本样式使用离线包的方式减少请求,并提供快速接入的方案。FrozenUI提供的一系列JavaScript插件,更优雅地在移动端上呈现更灵动的动画效果。FrozenUI提供的Animation case,把业务上有趣好玩的案例沉淀下来,帮助日后能更快速找到设计灵感。
特点:
适用于使用手Q规范设计的Web页面,而针对非手Q规范的页面,可通过修改变量定制界面主题。
可以按需选择需要的组件,也可以采用cdn和combo的方式按需加载。
使用iconfont展示图标,包含了按钮,列表,表单,提示,弹窗等常用组件,新增文本,布局,1px,
rem,文字截断,占位,两端留白,两端对齐等解决方案,同时解决了移动端屏幕适配问题。
CSS使用模块化的样式命名和组织规范,使用sass编写css代码。
FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FrozenUI。
FrozenJS 包括: basic:FrozenJS 的一些基础功能,包括模板引擎、tap 支持等。
ui:主要是一些触屏常用的 UI 组件,包括 dialog 等。
effect:非常用的特效库,特殊场景使用到是可以单独调用。
兼容android 2.3 +,ios 4.0 + 。
7.WeUi
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。
WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 反馈建议:admin@qf3k.com
  • 工作时间:周一到周五 10:00-19:00

关注我们

Copyright   ©2016-2018  千峰社区-IT技术交流社区|技术资源分享平台|编程语言|软件分享|建站开发|JAVA C#.NET开发  Powered by©Discuz!  技术支持:QF3K-TEAM     ( 苏ICP备16043464号-2千峰千峰千峰千峰千峰千峰千峰