프런트 엔드 UI 프레임워크란 무엇입니까?
- 青灯夜游원래의
- 2018-12-03 17:27:3519785검색
프런트 엔드 UI 프레임워크란 무엇입니까? 프런트엔드 UI 프레임워크에는 모바일 단말에 적합한 UI 프레임워크(Mint UI, SUI Mobile, Weui 등), PC 단말에 적합한 UI 프레임워크(iView, Element UI, SUI, H-ui 등), UI가 포함됩니다. 하이브리드 개발에 적합한 프레임워크(ionic, Framework7 등)에 대한 구체적인 내용 소개는 다음과 같습니다.
모바일 단말에 적합한 UI 프레임워크
Mint UI(Ele.me 팀)
중국 공식 홈페이지: http://mint-ui.github.io/#! /zh- cn
설명: vue
기반 vue
기반 모바일 UI 프레임워크 구성 요소 라이브러리:
GitHub 주소: https://github.com/ElemeFE/mint-ui/
Preview 주소:
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 모바일(알리바바 공유사업부 UED 팀)
공식 홈페이지 : http://m.sui.taobao.org/
설명: Framework7을 기반으로 개발된 UI 라이브러리 세트입니다. iOS 스타일을 기반으로 합니다. 매우 가볍고 아름답습니다. 사용하려면 CDN 파일만 가져오면 됩니다. iOS 6.0 이상 및 Android 4.0 이상과도 호환되므로 크로스 플랫폼 웹 앱 개발에 매우 적합합니다.
zepto 기반, IOS 스타일
미리보기:
http://m.sui.taobao.org/demos/
컴포넌트 라이브러리:
기본 소개:
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(WeChat 공식 디자인 팀)설명: WeUI는 WeChat 웹 서비스에 맞게 맞춤 제작되었으며 일관된 시각적 경험 세트입니다. WeChat 네이티브 기본 스타일 라이브러리는 WeChat 공식 디자인 팀이 WeChat 웹 개발에 맞게 맞춤 제작하여 사용자의 사용 인식을 더욱 통일시킬 수 있습니다.
버튼, 셀, 대화 상자, 진행률, 토스트, 기사, 액션 시트, 아이콘 등 다양한 요소가 포함되어 있습니다.
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/
설명: 미학과 효율적인 성능에 중점을 둔 모바일 및 WeChat UI입니다. jQuery 기반
호환성: 대부분의 모바일 장치와 호환 가능(Android4.0+, IOS6.0+와 호환),
flexbox 레이아웃 사용(낮은 버전의 Android 및 일부 특수 브라우저는 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
개인 의견: 맞춤형 키보드 플러그인이 하이라이트입니다
GMU(Baidu GMU 팀에서 개발)설명: jquery ui와 일치하는 zepto 기반의 경량 모바일 UI 구성 요소 라이브러리 사용 사양, 웹앱 제공, 간단하고 사용하기 쉬운 패드 측 UI 구성 요소.
iOS3+/android2.1+와 호환되며 Safari, Chrome, UC, qq 등과 같은 국내 주류 모바일 브라우저를 지원합니다.
GitHub 주소: https://github.com/fex-team/GMU
star:1106, fork:461
최신 커밋 2017.4.18 2pm
8명의 기여자
기본 소개:
리셋 소개. 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/
설명: 간단 유용하고 가볍고 빠른 모바일 터미널을 제공하는 프런트엔드 프레임워크입니다. 모바일QQ 스타일 사양을 기준으로 합니다. Tencent Mobile QQ 부가 가치 서비스에 적용됩니다. 안드로이드 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/purecss@0.6.1/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 프레임워크란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!