フロントエンド UI フレームワークとは何ですか?
フロントエンド UI フレームワークとは何ですか?フロントエンドUIフレームワークには、モバイル端末に適したUIフレームワーク（Mint UI、SUI Mobile、Weuiなど）、PC端末に適したUIフレームワーク（iView、Element UI、SUI、H-uiなど）、UIが含まれます。ハイブリッド開発に適したフレームワーク（ionic、Framework7など）の具体的な内容を紹介します。
# モバイル端末に適した UI フレームワーク
Mint UI (あなたはお腹が空いた? チーム)
中国語公式 Web サイト: http://mint-ui.github.io/#!/zh-cn説明: モバイル UI フレームワークベースvue vue に基づく
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- 引入组件库 --> <script ></script>
SUI Mobile (アリババ シェアリング事業部 UED チーム)
公式サイト: http://m.suit.taobao .org /説明: Framework7 に基づいて開発された UI ライブラリのセット。 iOS スタイルに基づいています。非常に軽量で美しく、CDN ファイルを導入するだけで使用できます。iOS 6.0 および Android 4.0 とも互換性があるため、クロスプラットフォームの Web アプリの開発に非常に適しています。 zepto、IOS スタイルに基づくプレビュー:http://m.suit.taabao.org/demos/コンポーネント ライブラリ:
<!-- 引入样式 --> <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 Web サービス用にカスタマイズされており、WeChat の視覚エクスペリエンスと一貫性があります。ネイティブ 基本スタイル ライブラリは、WeChat 公式デザイン チームによって WeChat Web 開発用にカスタマイズされており、ユーザーの使用認識をより統一することができます。 ボタン、セル、ダイアログ、進行状況、トースト、記事、アクションシート、アイコンなどのさまざまな要素が含まれています。 GitHub アドレス: https://github.com/weui/weuiプレビュー: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公式 Web サイト: http://www.ydui.org/
概要: 美観と効率的なパフォーマンスに重点を置いたモバイル端末と WeChat UI。 jQuery に基づく
互換性: ほとんどのモバイル デバイスと互換性があります (Android4.0、IOS6.0 と互換性があります);
は、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
個人的な意見: カスタム keyBoard プラグインがハイライトです
GMU (Baidu GMU チームによって開発)説明: zepto をベースとした jquery ui の利用仕様に準拠し、Web アプリやパッド向けにシンプルで使いやすい UI コンポーネントを提供する軽量モバイル UI コンポーネント ライブラリです。
iOS3 / android2.1と互換性があり、safari、chrome、UC、qqなどの国内主流のモバイルブラウザをサポートします。
GitHub アドレス: https://github.com/fex-team/GMU
star:1106,fork:461
最新コミット 2017.4.18 午後 2 時
8 人の寄稿者
基本的な紹介:
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/
説明: シンプルで使いやすく、軽量で高速な、モバイル端末にサービスを提供するフロントエンド フレームワーク。モバイルQQスタイルの仕様に基づいています。 Tencent Mobile QQ の付加価値サービスに適用されます。 Android 2.3、iOS 4.0と互換性があります。
GitHub アドレス: https://github.com/frozenui/frozenui
個人的な意見: JS コンポーネント ライブラリは比較的シンプルでモバイルファーストです
財団 中国の公式ウェブサイト: 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 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7662
15
1393
52
1205
24
91
11
2023 年に最も人気のあるフロントエンド UI フレームワーク 10 のランキング
Apr 12, 2023 pm 02:53 PM
今日は、2023 年に最も人気のあるフロントエンド UI フレームワーク 10 のランキングについて説明します。フロントエンド UI フレームワークは、HTML、CSS、JavaScript などのフロントエンド テクノロジに基づいた開発ツールセットで、UI コンポーネント、スタイル、レイアウトなどの一連の基本機能を提供し、フロントエンド開発者がより効率的に開発できるようにします。優れたユーザーエクスペリエンスを備えた製品の開発 Web アプリケーション。
PHPのUIフレームワークとは何ですか?
Jul 24, 2023 am 11:03 AM
PHP の UI フレームワークには次のものが含まれます: 1. 開発者が高品質の Web アプリケーションを構築するのに役立つオープンソースの Web アプリケーション開発フレームワークである Laravel、2. 複雑な Web アプリケーションを構築するための高性能でスケーラブルな PHP フレームワークである Symfony、3. 軽量の CodeIgniter Web アプリケーションの迅速な開発に適した PHP フレームワーク; 4. Web アプリケーションや API の構築に適した成熟した機能豊富な PHP フレームワーク CakePHP; 5. 高性能 PHP フレームワーク Yii など待ちます。
React と Vue: 適切なフロントエンド フレームワークを選択する方法
Sep 26, 2023 am 09:15 AM
React と Vue の比較: 適切なフロントエンド フレームワークを選択する方法 フロントエンド開発では、プロジェクトの成功には適切なフレームワークを選択することが重要です。数多くのフロントエンド フレームワークの中で、React と Vue は間違いなく最も人気のある 2 つの選択肢です。この記事は、React と Vue の長所と短所、エコシステム、パフォーマンス、開発経験を比較することで、読者が自分のプロジェクトに適したフロントエンド フレームワークを選択するのに役立ちます。 1. React と Vue のメリット・デメリットの比較 React のメリット: コンポーネント開発: React は UI を分割します。
VUEはフロントエンドまたはバックエンドに使用されていますか？
Apr 03, 2025 am 12:07 AM
Vue.jsは、主にフロントエンド開発に使用されます。 1）ユーザーインターフェイスとシングルページアプリケーションの構築に焦点を当てた軽量で柔軟なJavaScriptフレームワークです。 2）Vue.jsのコアはその応答性データシステムであり、データが変更されるとビューは自動的に更新されます。 3）コンポーネントの開発をサポートし、UIを独立した再利用可能なコンポーネントに分割できます。
PHP によって開発された UI フレームワークとは何ですか?
Aug 24, 2023 pm 03:40 PM
PHP によって開発された UI フレームワークには、Bootstrap、Laravel UI、CodeIgniter、Yii、Phalcon などがあります。詳細な紹介: 1. 応答性の高い Web ページや Web アプリケーションを簡単に構築するための CSS および JavaScript コンポーネントの豊富なセットを提供する Bootstrap; 2. フロントエンド フレームワークを迅速に統合するための Laravel UI 拡張パッケージを提供する Laravel UI; 3. CodeIgniter 、いくつかの UI コンポーネントやライブラリなどを提供します。
PHP でフロントエンド フレームワークとバックエンド フレームワークを統合するにはどうすればよいですか?
May 13, 2023 am 08:06 AM
Web アプリケーション開発がますます複雑になり、より高度な対話性が必要になるにつれて、フロントエンド フレームワークとバックエンド フレームワークの使用が非常に一般的になりました。このプロセスでは、アプリケーションのスムーズな動作と効率的なパフォーマンスを確保するために、フロントエンドとバックエンドのフレームワークを統合することも重要なステップとなっています。この記事では、PHP でフロントエンド フレームワークとバックエンド フレームワークを統合する方法に焦点を当てます。フロントエンド フレームワークとバックエンド フレームワークの概要 フロントエンド フレームワークは、アプリケーションのユーザー インターフェイスと対話型機能を指す一般用語です。 HTML、CSS、Java
Java フレームワークとフロントエンド フレームワークを統合するための一般的な課題と解決策
Jun 05, 2024 pm 01:30 PM
Java バックエンド フレームワークをフロントエンド フレームワークと統合する際の一般的な課題は次のとおりです。 クロスドメイン要求の問題: 解決策: CORS ミドルウェアを使用するか、CORS ヘッダーを追加します。ビュー テンプレートの統合: 解決策: フロントエンド フレームワーク アダプターまたはサーバーレス関数を使用して、HTML レンダリングを処理します。データ形式の変換: 解決策: 変換には共通のデータ モデルまたは中間層を使用します。イベント処理: 解決策: クロスフレーム イベント通信にはイベント バスまたは WebSocket を使用します。状態管理: 解決策: 単一の状態管理システムを使用して、フレームワーク間で状態を共有します。
PHP を使用してレスポンシブ デザインを行う方法
Jun 06, 2023 am 10:50 AM
モバイルデバイスの普及により、レスポンシブデザインは今日のウェブサイト開発において無視できない技術となっています。これにより、Web サイトはさまざまな画面サイズで最高の視覚効果とユーザー エクスペリエンスを提供できます。広く使用されているプログラミング言語として、PHP はレスポンシブ デザインにおいて重要な役割を果たします。この記事では、レスポンシブ デザインに PHP を活用する方法を説明します。 1. レスポンシブ デザインの基礎 レスポンシブ デザインを進める前に、Web ページの基本コンポーネントを理解する必要があります。通常、Webページは大きく3つに分かれています
