前端ui框架有哪些


前端ui框架有哪些?前端ui框架有:适合移动端的UI框架(Mint UI、SUI Mobile、Weui等),适合PC 端的UI框架(iView、Element UI、SUI、H-ui等),适合混合开发的UI框架(ionic、Framework7等),以下是具体的内容介绍。
适合移动端的UI框架
Mint UI(饿了么团队)
中文官网:http://mint-ui.github.io/#!/zh-cn
描述:基于vue的移动端UI框架
基于vue

组件库:
GitHub地址:https://github.com/ElemeFE/mint-ui/
预览地址:
http://elemefe.github.io/mint-ui/#/
基础引入:
CDN:
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>SUI Mobile(阿里巴巴共享业务事业部UED团队)
官网:http://m.sui.taobao.org/
描述:一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,
并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。
基于zepto,IOS风格
预览:
http://m.sui.taobao.org/demos/
组件库:
GitHub地址:https://github.com/sdc-alibaba/SUI-Mobile
基础引入:
CDN:
<!-- 引入样式 -->
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<!-- 引入组件库 -->
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>Weui(微信官方设计团队)
描述:WeUI 为微信 Web 服务量身设计,是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。
包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
GitHub地址:https://github.com/weui/weui
预览:

UI组件:https://weui.io
JS组件:https://github.com/weui/weui
基础引入:
CDN:
<!-- 引入样式 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>YDUI Touch
官网:http://www.ydui.org/
描述:一只注重审美,且性能高效的移动端&微信UI。基于jQuery
兼容性:兼容绝大多数移动端设备(兼容Android4.0+、IOS6.0+);
采用 flexbox 布局,因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性,YDUI 将采取其他解决方案;
基础引入:(需要下载)
引入YDUI样式:ydui.css
引入YDUI自适应解决方案类库:ydui.flexible.js
引入jQuery2.0+
引入YDUI脚本:ydui.js
组件库:
预览:
http://m.ydui.org
GitHub地址:https://github.com/ydcss/ydui
个人观点:自定义keyBoard插件为亮点
GMU(百度GMU小组开发)
描述:基于zepto的轻量级mobile UI组件库,符合jquery ui使用规范,提供webapp、pad端简单易用的UI组件。
兼容iOS3+ / android2.1+,支持国内主流移动端浏览器,如safari, chrome, UC, qq等。
GitHub地址:https://github.com/fex-team/GMU
star:1106,fork:461
latest commit 2017.4.18 2pm
8 contributors
基础引入:
引入reset.css:https://github.com/fex-team/GMU/blob/master/dist/reset.css
引入gmu.css:https://github.com/fex-team/GMU/blob/master/dist/gmu.css
引入zepto.js:https://github.com/fex-team/GMU/blob/master/dist/zepto.js
引入gmu.js:https://github.com/fex-team/GMU/blob/master/dist/gmu.js
FrozenUI(QQVIP FD团队? Alloyteam团队)
官方地址:http://frozenui.github.io/
描述:简单易用,轻量快捷,为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。兼容android 2.3 +,ios 4.0 + 。
GitHub地址:https://github.com/frozenui/frozenui
个人观点:JS组件库相对简洁,移动优先
Foundation
中文官网:http://www.foundcss.com/
描述:Foundation是国外最流行的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
GitHub地址:https://github.com/zurb/foundation-sites
基础引入:
CDN:
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
<!-- 引入组件库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>个人观点:无很多中文官方文档,不便于中国开发者
Amaze UI
官方地址:http://amazeui.org/
描述:中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果。基于jQuery
GitHub:https://github.com/amazeui/amazeui
组件库:
基础引入:
CDN:
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js观点:适合PC端更多(例如分页的实现)
Pure
中文官网:https://www.purecss.cn/
描述:纯CSS,美国雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目。
GitHub:https://github.com/yahoo/pure/
基础引入:
CDN:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">适合PC 端的UI框架
iView
官网地址:https://www.iviewui.com/
描述:一套基于 Vue.js 的高质量 UI 组件库。iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。
GitHub地址:https://github.com/iview/iview
组件库:
基础引入:
CDN:
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>Element UI(饿了么团队)
官方地址:http://element-cn.eleme.io/#/zh-CN
描述:基于 Vue 2.0 的桌面端组件库
GitHub:https://github.com/ElemeFE/element
组件库:
基础引入:
CDN:
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>SUI(阿里巴巴国际UED团队-商家业务事业部)
官网地址:http://sui.taobao.org/
描述:一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。基于jquery
组件库:
GitHub:https://github.com/sdc-alibaba/sui
基础引入:
CDN:
<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>观点:偏向设计规范,组件库相对简单。
H-ui
官方地址:http://www.h-ui.net/
描述:轻量级前端框架,简单免费,兼容性好,服务中国网站。
基于jQuery
GitHub地址:https://github.com/jackying/h-ui
组件库:
观点:无亮点,借鉴第三方插件完成
layui
官方地址:http://www.layui.com/
描述:经典模块化前端框架,更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。
组件库:

GitHub:https://github.com/sentsin/layui/
基础引入:
layui.css、layui.js
uiKit(YOOtheme 团队)
官网地址:http://www.getuikit.net/
描述:一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。依赖jQuery
UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中,所有JavaScript 都会失效。
组件库:
GitHub地址:https://github.com/uikit/uikit
基础引入:
CDN:
<link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" />
<script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script>Bootstrap
中文官网:http://www.bootcss.com/
描述:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
组件库:
GitHub地址:https://github.com/twbs/bootstrap
基础引入:
CDN:
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>其他基于bootstrap衍生出来的模块:
Ace Admin后台管理系统模板:基于bootstrap3;http://ace.jeka.by/
Metronic后台管理模板:http://www.metronic.com/
H+:http://www.zi-han.net/theme/hplus/
jQuery UI+Bootstrap:https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/
更多:http://www.cssmoban.com/cssthemes/houtaimoban/
jQuery UI
官方网址:http://jqueryui.com/
组件库:
其他基于jQuery衍生出来的模板:
BUI:基于jQuery+KISSY UI:http://www.builive.com/
EasyUI:http://www.jeasyui.net/
描述:使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
DWZ JUI:http://jui.org/
适合混合开发的UI框架
ionic
中文官网网址:http://www.ionic-china.com/
描述:ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。基于angular
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。
Framework7
官网地址:http://framework7.cn/
描述:Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。
也可以用来作为原型开发工具,可以迅速创建一个应用的原型。
它只专注于为 iOS 和 Google Material 设计提供最好的体验。
GitHub:https://github.com/framework7io/framework7
OnsenUI
官网地址:https://onsen.io/
描述:用来构建混合移动端APP的 HTML5 UI 框架
GitHub地址:https://github.com/OnsenUI/OnsenUI
总结:

  • 鍓嶇ui妗嗘灦鏈夊摢浜
    绛旓細鍓嶇ui妗嗘灦鏈:閫傚悎绉诲姩绔殑UI妗嗘灦(Mint UI銆丼UI Mobile銆乄eui绛),閫傚悎PC 绔殑UI妗嗘灦(iView銆丒lement UI銆丼UI銆丠-ui绛),閫傚悎娣峰悎寮鍙戠殑UI妗嗘灦(ionic銆丗ramework7绛),浠ヤ笅鏄叿浣撶殑鍐呭浠嬬粛銆傞傚悎绉诲姩绔殑UI妗嗘灦Mint UI(楗夸簡涔堝洟闃)涓枃瀹樼綉:http://mint-ui.github.io/#!/zh-cn鎻忚堪:鍩轰簬vue鐨勭Щ鍔ㄧUI妗嗘灦鍩...
  • 鍓嶇浜哄繀鐭ョ殑涓冨ぇUI缁勪欢搴!
    绛旓細1. Arco Design鐢卞瓧鑺傝烦鍔ㄥ嚭鍝佺殑Arco Design锛屼笉浠呮槸涓涓粍浠跺簱锛屾洿鏄紒涓氱骇璁捐涓庡紑鍙戠殑鍏ㄨ兘閫夋墜銆傚畠鎻愪緵React鍜孷ue鐗堟湰鐨勬枃妗o紝涓嶄粎闄愪簬缁勪欢锛岃繕鏈夋槗浜庝娇鐢ㄧ殑Arco Design Pro鍚庡彴瑙e喅鏂规锛岃浣犵殑寮鍙戜綋楠屾洿涓婁竴灞傛ゼ銆2. Taro UI浜笢鍑瑰嚫瀹為獙瀹ゅ惧姏鎵撻犵殑Taro UI锛屼互澶氱寮鍙戜负鏍稿績锛岃浣犲彧闇缂栧啓涓...
  • ui妗嗘灦鏈夊摢浜,web鍓嶇寮婧愭鏋
    绛旓細5.uiKit uiKit鏄竴娆捐交閲忕骇銆佹ā鍧楀寲鐨勫墠绔鏋讹紝鍙揩閫熸瀯寤哄己澶х殑web鍓嶇鐣岄潰銆6.H-ui H-ui鏄交閲忕骇鍓嶇妗嗘灦锛岀畝鍗曞厤璐癸紝鍏煎鎬уソ锛岄傜敤浜庝腑鍥界綉绔欍7.Weui weUI 鏄竴濂楀悓寰俊鍘熺敓瑙嗚浣撻獙涓鑷寸殑鍩虹鏍峰紡搴擄紝鐢卞井淇″畼鏂硅璁″洟闃熶负寰俊 Web 寮鍙戦噺韬璁★紝鍙互浠ょ敤鎴风殑浣跨敤鎰熺煡鏇村姞缁熶竴銆傚寘鍚玝utton銆乧el...
  • 鍓嶇h5妗嗘灦鏈夊摢浜
    绛旓細2. Foundation Foundation鏄彟涓涓彈娆㈣繋鐨勫墠绔鏋锛屼笌Bootstrap绫讳技锛屼篃鏀寔HTML5鍜孋SS3銆傚畠鎻愪緵浜嗕赴瀵岀殑UI缁勪欢鍜岀伒娲荤殑缃戞牸绯荤粺锛屽彲浠ュ府鍔╁紑鍙戣呭揩閫熸瀯寤哄搷搴斿紡缃戠珯銆侳oundation涔熸彁渚涗簡璁稿JavaScript鎻掍欢鍜岀幇浠e寲鐨勪氦浜掑姛鑳姐3. Semantic UI Semantic UI鏄竴涓槗浜庝娇鐢ㄥ拰鎵╁睍鐨勫墠绔鏋讹紝瀹冩彁渚涗簡涓板瘜鐨勯...
  • 2022 骞撮潰鍚鍓嶇寮鍙戜汉鍛樼殑 9 涓渶浣 UI 缁勪欢搴/妗嗘灦
    绛旓細- Bulma - 2015骞磋癁鐢熺殑Flexbox妗嗘灦锛屽紑婧愪笖鏄撳畾鍒讹紝鍏ㄧ悆鏁扮櫨涓囩綉绔欓噰鐢紝浠巒pm鎴杫arn瀹夎锛屽叾绠娲佺殑椋庢牸鍦ㄧ櫥褰曢〉銆佸崥瀹㈠拰鐢靛晢鍦烘櫙涓挨涓洪傜敤銆**6. ** **Chakra UI** **锛**浠ypeScript鍜孞avaScript涓哄熀鐭筹紝Chakra UI娉ㄩ噸鍙闂у拰鐜颁唬浣撻獙锛屽吋瀹筗AI-ARIA锛屽畾鍒跺寲绋嬪害楂橈紝鍔犻熷紑鍙戣繃绋嬨傞氳繃npm...
  • 鍓嶇ui妗嗘灦鏈夊摢浜
    绛旓細Vant UI鏄湁璧鍓嶇鍥㈤槦鍩轰簬鏈夎禐缁熶竴鐨勮鑼冨疄鐜扮殑 Vue 缁勪欢搴擄紝鎻愪緵浜嗕竴鏁村 UI 鍩虹缁勪欢鍜屼笟鍔$粍浠躲傞氳繃 Vant锛屽彲浠ュ揩閫熸惌寤哄嚭椋庢牸缁熶竴鐨勯〉闈紝鎻愬崌寮鍙戞晥鐜囥侳lutter Flutter 鏄胺姝岀殑绉诲姩绔 UI 妗嗘灦锛屽彲鍦ㄦ瀬鐭殑鏃堕棿鍐呮瀯寤 Android 鍜 iOS 涓婇珮璐ㄩ噺鐨勫師鐢熺骇搴旂敤銆 Flutter 鍙笌鐜版湁浠g爜涓璧峰伐浣, 瀹...
  • vue 鍓嶇椤圭洰涓鏈夊摢浜甯哥敤鐨勭粍浠跺拰妗嗘灦?
    绛旓細鍦╒ue鍓嶇椤圭洰涓紝鐘瑰涓搴х拃鐠ㄧ殑瀹濆簱锛屾眹鑱氫簡浼楀寮哄ぇ鐨勭粍浠跺拰妗嗘灦锛屽畠浠嚟鍊熷叾鍗撹秺鐨勬ц兘鍜屾槗鐢ㄦэ紝鎴愪负鏋勫缓楂樻晥銆佺幇浠e寲Web搴旂敤鐨勫緱鍔涘姪鎵嬨備互涓嬫槸涓浜涗笉鍙垨缂虹殑Vue缁勪欢鍜屾鏋讹紝瀹冧滑鍚勫叿鐗硅壊锛屾弧瓒充笉鍚屽満鏅殑闇姹傦細Element UI锛氫綔涓篤ue 2.0鐨勬澃鍑轰箣浣滐紝瀹冩彁渚涗簡涓濂椾赴瀵鐨刄I缁勪欢锛屼粠鍩虹鐨勬寜閽...
  • 鍓嶇鏈杩戞祦琛岀殑妗嗘灦閮鏈夊摢浜?
    绛旓細1.Bootstrap涓枃缃 Bootstrap锛岃浣犵殑椤甸潰鏇寸畝娲併佺洿瑙傘佸己鎮嶃佺Щ鍔ㄨ澶囦紭鍏堢殑鍓嶇寮鍙戞鏋,璁﹚eb寮鍙戞洿杩呴熴佹洿绠鍗曘傚畠杩樻彁渚涗簡鏇翠紭闆呯殑HTML鍜孋SS瑙勮寖锛屽畠鍗虫槸鐢卞姩鎬丆SS璇█Less鍐欐垚銆傛湁鐫涓板瘜鐨勭綉鏍煎竷灞绯荤粺浠ュ強涓板瘜鐨勫彲閲嶇敤缁勪欢锛岃繕鏈夊己澶х殑鏀寔鍗佸嚑鐨凧avaScript銆乯Query鎻掍欢浠ュ強缁勪欢瀹氬埗绛夈2. Layui ...
  • 浠涔堟槸闆嗘垚UI鐨鍓嶇妗嗘灦
    绛旓細鐩墠娴佽鐨10涓UI鍓嶇妗嗘灦 1. Kendo UI Kendo UI 灏嗗畠鏈韩瀹氫綅鎴愪负:鈥濆綋浠eb鍜屾墜鏈篴pp寮鍙戞墍闇鐨勭患鍚 HTML5/JavaScript 妗嗘灦銆俆elerik鈥檚 Kendo UI鏄瘡涓浣嶉渶瑕佸垱寤篐TML5绔欑偣鍜屾墜鏈篴pps鐨勪笓涓氬紑鍙戜汉鍛樻墍闇瑕佺殑銆侹endo UI 鍗存嫢鏈夊叏閮細涓板瘜鐨刯Query鐨勭獥浣撻儴浠讹紝绠鍗曞苟涓斿缁堝涓鐨勭▼搴忔帴鍙o紝绋冲畾鍙潬鐨...
  • Web鍓嶇宸ョ▼甯堝枩娆㈢殑楂樿川閲廤eb鍓嶇妗嗘灦鏈夊摢浜?
    绛旓細涓銆丵UICKUIQUICKUI鏄竴濂楀畬鏁寸殑浼佷笟绾eb鍓嶇寮鍙戣В鍐虫柟妗堬紝鐢卞熀纭妗嗘灦銆乁I缁勪欢搴撱佺毊鑲ゅ寘銆佺ず渚嬪伐绋嬪拰鏂囨。绛夌粍鎴愩備娇鐢≦UICKUI寮鍙戣呭彲浠ユ瀬澶у湴鍑忓皯宸ヤ綔閲忥紝鎻愰珮寮鍙戞晥鐜囷紝蹇熸瀯寤哄姛鑳藉己澶с佺編瑙傘佸吋瀹圭殑web搴旂敤绯荤粺銆俀UICKUI浼樺娍锛氣憼鍔熻兘鏈涓哄己澶UICKUI缁忓巻浜7骞寸殑杩唬鏇存柊锛屼笉鏂粠瀹㈡埛鐨勫悇绉嶄笟鍔′腑瀵...
  • 扩展阅读:web前端三大主流框架 ... ui框架排名 ... 移动ui框架排行榜 ... 前端最好的ui框架 ... 常见的web开发框架 ... 前端常用的框架 ... 前端app开发框架 ... 十大前端框架设计 ... bootstrap前端框架 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网