Quels sont les frameworks d'interface utilisateur front-end ?

Quels sont les frameworks d'interface utilisateur front-end ? Les frameworks d'interface utilisateur front-end comprennent : des frameworks d'interface utilisateur adaptés aux terminaux mobiles (Mint UI, SUI Mobile, Weui, etc.), des frameworks d'interface utilisateur adaptés aux terminaux PC (iView, Element UI, SUI, H-ui, etc.) et UI frameworks adaptés au développement hybride (ionic, Framework7 etc.), voici l'introduction du contenu spécifique.

Cadre d'interface utilisateur adapté aux mobiles

Mint UI (Avez-vous faim ? Team)

Site officiel chinois : http://mint-ui.github.io/#!/zh-cn

Description : Framework d'interface utilisateur mobile basé sur vue

Basé sur vue

Bibliothèque de composants :

Adresse GitHub : https://github.com/ElemeFE/ mint- ui/

Adresse d'aperçu :

http://elemefe.github.io/mint-ui/#/

Introduction de base :

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 (équipe UED de la division commerciale partagée d'Alibaba)

Site officiel : http://m.sui. taobao .org/

Description : Un ensemble de bibliothèques d'interface utilisateur développées sur la base de Framework7. Basé sur le style iOS. Il est très léger et beau. Il vous suffit d'importer notre fichier CDN pour l'utiliser

Et il est compatible avec iOS 6.0+ et Android 4.0+, ce qui le rend très approprié pour développer des applications Web multiplateformes.

Basé sur zepto, style IOS

Aperçu :

http://m.sui.taobao.org/demos/

Bibliothèque de composants :

Adresse GitHub : https://github.com/sdc-alibaba/SUI-Mobile

Introduction de base :

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 (équipe de conception officielle de WeChat)

Description : WeUI est conçu sur mesure pour les services Web WeChat et est un ensemble de WeChat visuels natifs La bibliothèque de styles de base avec une expérience cohérente est conçue par l'équipe de conception officielle de WeChat pour le développement Web WeChat, ce qui peut rendre la perception d'utilisation des utilisateurs plus unifiée.

Contient divers éléments tels qu'un bouton, une cellule, une boîte de dialogue, une progression, un toast, un article, une feuille d'action, une icône, etc.

Adresse GitHub : https://github.com/weui/weui

Aperçu :

Composant UI : https://weui.io

Composant JS : https://github.com/weui/weui

Introduction de base :

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

Site officiel : http://www.ydui.org/

Description : Une interface utilisateur mobile et WeChat qui se concentre sur l'esthétique et les performances efficaces. Basé sur jQuery

Compatibilité : compatible avec la plupart des appareils mobiles (compatible avec Android4.0+, IOS6.0+) ;

adopte la disposition flexbox En raison des versions basses d'Android et de certains navigateurs spéciaux. Incompatible avec les attributs flex-basis, flex-wrap et inline-flex, YDUI adoptera d'autres solutions

Introduction de base : (nécessite un téléchargement)

Introduction du style YDUI : ydui.css

Présentation de la bibliothèque de classes de solutions adaptatives YDUI : ydui.flexible.js

Présentation de jQuery2.0+

Présentation du script YDUI : ydui.js

Bibliothèque de composants :

Aperçu :

http://m.ydui.org

Adresse GitHub : https://github.com/ ydcss /ydui

Opinion personnelle : le plug-in KeyBoard personnalisé est le point culminant

GMU (développé par l'équipe Baidu GMU)

Description : Une bibliothèque légère de composants d'interface utilisateur mobile basée sur zepto, qui est conforme aux spécifications d'utilisation de jquery ui et fournit des composants d'interface utilisateur simples et faciles à utiliser pour les applications Web et les pads.

Compatible avec iOS3+ / Android2.1+, prend en charge les navigateurs mobiles grand public nationaux, tels que Safari, Chrome, UC, QQ, etc.

Adresse GitHub : https://github.com/fex-team/GMU

star:1106, fork:461

dernier commit 2017.4.18 14h

8 contributeurs

Introduction de base :

Introduction de reset.css : https://github.com/fex-team/GMU/blob/master/dist/reset.css

Présentez gmu.css : https://github.com/fex-team/GMU/blob/master/dist/gmu.css

Présentez zepto.js : https://github. com /fex-team/GMU/blob/master/dist/zepto.js

Présentation de gmu.js : https://github.com/fex-team/GMU/blob/master/dist/gmu. js

FrozenUI (Équipe QQVIP FD • Equipe Alloyteam)

Adresse officielle : http://frozenui.github.io/

Description : Simple et facile à utiliser, léger et rapide, un framework front-end au service des terminaux mobiles. Basé sur les spécifications du style QQ mobile. Appliqué aux services à valeur ajoutée Tencent Mobile QQ. Compatible avec Android 2.3+, iOS 4.0+.

Adresse GitHub : https://github.com/frozenui/frozenui

Opinion personnelle : la bibliothèque de composants JS est relativement simple et axée sur le mobile

Fondation

Site officiel chinois : 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

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!