html5web前端开发框架 前端ui框架有哪些

最近经常有小伙伴私信询问html5web前端开发框架 前端ui框架有哪些相关的问题，今天，我爱编程网小编整理了以下内容，希望可以对大家有所帮助。

前端ui框架有哪些

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

组件库：
GitHub地址：
预览地址：
-ui/#/
基础引入：
CDN:
<!-- 引入样式 -->
<link rel="stylesheet" href="
<!-- 引入组件库 -->
<script src=" Mobile（阿里巴巴共享业务事业部UED团队）
官网：
描述：一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，
并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
基于zepto，IOS风格
预览：

组件库：
GitHub地址：
基础引入：
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地址：
预览：

UI组件：
JS组件：
基础引入：
CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="
<!-- 引入组件库 -->
<script type="text/javascript" src=" Touch
官网：
描述：一只注重审美，且性能高效的移动端&微信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
组件库：
预览：

GitHub地址：
个人观点：自定义keyBoard插件为亮点
GMU（百度GMU小组开发）
描述：基于zepto的轻量级mobile UI组件库，符合jquery ui使用规范，提供webapp、pad端简单易用的UI组件。
兼容iOS3+ / android2.1+，支持国内主流移动端浏览器，如safari, chrome, UC, qq等。
GitHub地址：
star:1106,fork:461
latest commit 2017.4.18 2pm
8 contributors
基础引入：
引入reset.css：
引入gmu.css：
引入zepto.js：
引入gmu.js：
FrozenUI（QQVIP FD团队? Alloyteam团队）
官方地址：
描述：简单易用，轻量快捷，为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。兼容android 2.3 +，ios 4.0 + 。
GitHub地址：
个人观点：JS组件库相对简洁，移动优先
Foundation
中文官网：
描述：Foundation是国外最流行的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
GitHub地址：
基础引入：
CDN:
<!-- 引入样式 -->
<link rel="stylesheet" href=" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
<!-- 引入组件库 -->
<script src=" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>个人观点：无很多中文官方文档，不便于中国开发者
Amaze UI
官方地址：
描述：中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。基于jQuery
GitHub：
组件库：
基础引入：
CDN:







观点：适合PC端更多(例如分页的实现)
Pure
中文官网：
描述：纯CSS，美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。
GitHub：
基础引入：
CDN:
<link rel="stylesheet" href=" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">适合PC 端的UI框架
iView
官网地址：
描述：一套基于 Vue.js 的高质量 UI 组件库。iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
GitHub地址：
组件库：
基础引入：
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（饿了么团队）
官方地址：-cn.eleme.io/#/zh-CN
描述：基于 Vue 2.0 的桌面端组件库
GitHub：
组件库：
基础引入：
CDN:
<link rel="stylesheet" href="
<script src="
官网地址：
描述：一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。基于jquery
组件库：
GitHub：
基础引入：
CDN:
<link href="" rel="stylesheet">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>观点：偏向设计规范，组件库相对简单。
H-ui
官方地址：-ui.net/
描述：轻量级前端框架，简单免费，兼容性好，服务中国网站。
基于jQuery
GitHub地址：
组件库：
观点：无亮点,借鉴第三方插件完成
layui
官方地址：
描述：经典模块化前端框架，更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。
组件库：

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

手机html5前端开发用什么框架

现在学html5开发手机应用前景好吗

随着移动互联网的一路猛歌，web得到了更大的发展机遇。

而web行业把重大的希望都寄托于html5，虽然html5仅仅是一项基于web的技术标准。

移动互联网迫使一些传统的互联网浏览器厂商不得不做改变，不管哪个移动端操作系统，浏览器内核技术达到了前所未有的统一，大部分都使用

wbkit内核，移动的浏览器一开始就支持最新的html5(pc时代无法做的)。90%以上的手机支持html5，Html5提升了浏览器客户端的开发

能力，这种提升是质的变化。使客户端更加丰富。

移动领域让html5发挥了价值，html5cssjs在pc端和移动端是高度一致的，也就是能很好的把pc端的浏览形态嫁接到移动端。

phonegap等工具可以很好的考虑操作系统的兼容问题，就能在多平台开发，一次开发全部搞定，这样成本，时间大大降低(趋势总是更偏爱效率)。对于刚

起步的小公司来说是非常有意义的。不过为了兼容还是需要牺牲一部分的性能，但是web应用和原生应用的差异会变得越来越模糊，随着的本身的内存，cpu等

硬件越来越快，网速从2G到4G到wifi越来越快，这种性能上的劣势会越来越不明显。

Html5相对于html增加了多媒体，动画游戏，离线应用，数据存储，语义化定义，地理信息，支持websocket通讯等大大提高了html的功能。相信以后会有更加多元的功能加入。

乔布斯，扎克伯格都是力挺html5的，虽然在2012年因为html5体验和性能问题，扎克伯格曾说“在html5上下赌注太多，在本地下注

太少。”那时让很多html5支持者感到迷茫。但随着移动端的蓬勃发展，硬件设备的不断提升，上网速度的越来越快，html5技术的越来越成熟，越来越被

开发商，大众所接受。他的态度也发生了改变。Facebook在W3C HTML5小组的顾问委员会代表Tobie Lanel，给所有Facebook

HTML5相关的开发者发送了一封题为“扎克伯格关于HTML5的言论的真正含义”

的群体邮件，代表Facebook官方解读了Facebook对HTML5的态度，Tobie重新解读了这可伯格现场的采访录音，扎克称Facebook

过去几年在HTML5上押注太多，因为时机并未成熟。但他同时又称HTML5的未来从长期看令人兴奋。

1、前景不用说很棒

2、个人觉得html5是上手比较容易，后期会相对难一点

3、答主现在都是自学的，买几本好的书，看看视频。学一样东西最好能让自己先爱上它，心得。

4、ios和安卓是大系统，html5是其中一种开发系统的语言。

web前端开发框架有哪些_web前端开发主要框架

常见的web前端开发框架如下：

1、Bootstrap：

主流框架之一，Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。

2、html5-boilerplate：

该框架可以快速构建健壮，且适应力强的webapp或网站。

3、Meteor：

Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开发。

4、Materialize：

基于材料设计的现代化响应式前端框架。可提供默认的样式，自定义组件。此外，Materialize还改进动画和过渡，为开发人员提供流畅的体验。 我爱编程网

5、AmazeUI：

国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架AmazeUITouch以及针对跨屏HTML5网页开发的AmazeUIWeb。

扩展资料：

web框架程序的作用：

Web框架使得在进行Web应用开发的时候，减少了工作量。Web框架主要用于动态网络开发，动态网络主要是指现在的主要的页面，可以实现数据的交互和业务功能的完善。

使用Web框架进行Web开发的时候，在进行数据缓存、数据库访问、数据安全校验等方面，不需要自己再重新实现，而是将业务逻辑相关的代码写入框架就可以。也就是说，通过对Web框架进行主观上的“缝缝补补”，就可以实现自己进行Web开发的需求了。

以PHP为例，PHP可以在apache服务器上进行Web开发，而不必使用框架。使用PHP进行开的时候，在不适用框架的情况下，数据库连接就需要自己来实现，页面的生成和显示也是一样。比如框架的话可以完成避免sql注入的工作，而使用PHP在不用框架的情况下，这部分要自己做。

以上就是我爱编程网小编整理的内容，想要了解更多相关资讯内容敬请关注我爱编程网。