프런트 엔드 UI 프레임워크란 무엇입니까?

프런트 엔드 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 ></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/

컴포넌트 라이브러리:

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=&#39;text/javascript&#39; src=&#39;//g.alicdn.com/sj/lib/zepto/zepto.min.js&#39; charset=&#39;utf-8&#39;></script>
<script type=&#39;text/javascript&#39; src=&#39;//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js&#39; charset=&#39;utf-8&#39;></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" ></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  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 ></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 ></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" ></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 ></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  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!