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

JavaScript/前端
402
0
0
2022-08-16

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源码进行性能优化而来。[

前端工程师应该你知道的这些UI框架特点: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 应用更快速载入。

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

最接近原生APP体验的高性能前端框架,是基于html5plus(简称5+或html5+)引擎的一个UI框架.

前端工程师应该你知道的这些UI框架100k的js文件,60k的css文件。原生编写,不依赖任何三方框架,xcode和Android studio里所有原生控件都具备,精练的代码、适时的5+原生动画调用,达到原生应用的体验.编写一套代码,iOS、Android、浏览器、微信App、百度直达号、流应用全覆盖.

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

jQuery UI是一款基于jQuery的开源Javascript框架,jQuery UI框架主要提供了用户交互、动画、特效和可更换主题的可视控件,让开发者可以更方便地实现网页交互界面,jQuery UI的整个框架比较庞大,但你也可以根据自己需要使用的功能生成适合自己的框架底层。jQuery UI界面设计非常漂亮,值得一试。

前端工程师应该你知道的这些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 部件。

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

Flat UI的特点:

  • 包含很多基本的用户界面,同时也可以灵活创建更多自定义的UI界面组件
  • 包含丰富的矢量图标和符号
  • 自定义调色板
  • 基于HTML / CSS、JavaScript的布局

6.Frozen UI

FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。遵循手Q样式规范,基本样式使用离线包的方式减少请求,并提供快速接入的方案。FrozenUI提供的一系列JavaScript插件,更优雅地在移动端上呈现更灵动的动画效果。FrozenUI提供的Animation case,把业务上有趣好玩的案例沉淀下来,帮助日后能更快速找到设计灵感。前端工程师应该你知道的这些UI框架

特点:

适用于使用手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 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。前端工程师应该你知道的这些UI框架

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。

WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含buttoncelldialogtoastarticleicon等各式元素。

未完待续,对前端感兴趣的朋友可以关注下小编头条号,gosky。