几款流行的HTML5 UI 框架比较
手机HTML5开发，大部分都使用现有的框架，这里简单比较几个流行的UI 框架。作者（启明星工作室 http://www.dotnetcms.org） 比较一下几款流行的HTML5框架，个人意见，仅供参考。
（1）MUI
网址： http://dev.dcloud.net.cn/mui/
优点：MUI是数字dclound推出的一款流行框架，个人感觉,这是目前最好的一个H5 UI框架，使用简单，操作方便。
缺点：MUI为了达到原生效果，重新定义了Form表单里input，select，textarea所有的样式，这给用户自定义样式带来的不便。
例如下图左图是MUI里，直接使用<select>标签，是没有下拉箭头的，这会让用户迷惑。
右图，我们可以在HTML代码里，重新定义select让其显示。
select {
-webkit-appearance: menulist !important;
}
其实，我在用bootstrap时，到想起当时bootstrap开发人员在定义table时的一句话，他们说他们本可以通过CSS重写table，但是，因为有些网站需要原始的table样式，所以，为了和前者兼容，他们方式了
通过全局CSS改变table默认样式，如果开发人员像使用bootstrap的table样式，只要增加 <table class="table"> 就可以了，这样，既不增加多少工作量，又能兼容过去的程序。
我认为这点值得MUI借鉴。
（2）WeUI
优点：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。所以，其样式基本上核微信“长”的一样。
缺点：抱歉，我对WeUI的评价不高，这和腾讯的大名完全不符。我原本对WeUI期望甚高，结果实际测试非常令人失望。这些失望表现在太过于微信化，限制了他是使用广度。
更主要的是，其CSS名称与其他H5框架完全不一样，以简单的面板为例，公认的命名方式为：
<div class="panel">
<div class="panel panel-header">
标题
</div>
<div class="panel panel-body">
主体
</div>
</div>
但weui的命名类似如下：header缩写成了hd，body所写成了bd，类的名称，你叫做page__title也没问题，问题是page和title之间是2个下划线，而有些采用类名称采用：中划线和下划线一起用。
如weui-cell__hd。当你大量编写页面时，你脑子里会不停的切换想着WeUI类到底叫什么名字。
<div class="page panel ">
<div class="page__hd">
<h1 class="page__title">Title</h1>
</div>
<div class="page__bd"> <div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">手机</label></div>
<div class="weui-cell__bd">
<span class="weui-input" id="mobile" ></span>
</div>
</div>
</div>
</div>
WeUI还有一个致命缺点：多一个span或者div都可能使得你的样式完全失效。例如如下，可能仅仅在body与tab__hd之间多了一个div，就会导致你页面失效。
<body>
<div class=tab__hd>
</div>
</div>
</body>
和
<body>
<div>
<div class=tab__hd>
</div>
</div>
</div>
</body>
（3）Jquery Mobile
优点:这应该是最早的HTML5框架，
缺点：Jquery虽然很流行，但是不得不说JqueryMobile是一个失败的作品。现在好像都停止更新了。JM最大的缺点是速度太慢。
这也难怪，浏览器支持的是CSS与JS，但是JM通过自定义很多data-*来重写渲染最终的样式，
例如如下代码的 data-enhanced,data-icon，这些data-*属性，浏览器并不能识别，需要JM的JS引擎解释后，转换为CSS语言，
当页面大量使用这些data-*属性时，其性能极具下降，现在应该没什么人使用了。
<input type="button" data-enhanced="true" value="Enhanced - Left">
<input type="button" data-icon="delete" value="Left (default)">
（4）Bootstrap
优点：兼容PC和手机，其推出的理念与样式，启发了很多后起之秀，例如将页面分成12份，根据分辨率不同，自动组合灯。在PC样式上，具有不可替代的作用。
缺点：也正因为他需要兼容PC和手机，使得虽然PC样式很优秀，但是手机效果只能说是“中规中矩”，毕竟“又想马儿跑得快，又想马儿不吃草”是不现实的。
（5）Framework7
没用过，但是看起来还不错，值得推挤。
（6）Amaze UI
没用过，其实Amaze有 基于 React.js 的移动端 Web 组件库 http://t.amazeui.org 因为是基于React.js的，感觉入门门槛挺高
（7）Layui
网址 http://www.layui.com
Layer目前人气极具上升，不过她还是偏重于PC
几款流行的HTML5 UI 框架比较的更多相关文章
- 【推荐】HTML5 UI框架 推荐
笔者的男装网店:http://shop101289731.taobao.com .冬装,在寒冷的冬季温暖你.新品上市,环境选购 最近自己瞎搞一下web网页的东西.想开发先找资源. 整理了一下HTML5 ...
- 【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
- HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
- 目前流行前端几大UI框架排行榜
在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 流行指数:★★★★ Mint UI是 ...
- 推荐25款实用的 HTML5 前端框架和开发工具【下篇】
快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验. ...
- HTML5 UI框架Kendo UI Web教程：创建自定义组件（三）
Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...
- HTML5 UI框架Kendo UI Web自定义组件（一）
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...
- HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...
- 目前流行前端几大UI框架
title: "Windows照片查看器-召回大法" categories: windows tags: windows author: LIUREN --- Windows照片查 ...
随机推荐
- UVA101 【The Blocks Problem】
一个大模拟!!! 总的来说就是碰到move就要把a上面的全部放回原处. 如果碰到onto就要把b上面的全部放到原处. 因为move是只移动a一个,所以a上面的要归位,而pile是移一堆,所以不用. o ...
- poj3237树链剖分边权+区间取负
树链剖分+线段树lazy-tag在树链上操作时千万不要写错.. /* 树链剖分+线段树区间变负 */ #include<iostream> #include<cstring> ...
- 性能测试十五：liunx下搭建（tomcat+项目+jmete命令行）
单机 准备工作: 1.压力机安装并配置好JDK,输入java和javac验证环境变量 2.上传jmeter到liunx下: 准备好jmeter的压缩包 在第三方工具中对linux文件上传下载(需先装好 ...
- python 全栈开发，Day26(hashlib文件一致性,configparser,logging,collections模块,deque,OrderedDict)
一.hashlib文件一致性校验 为何要进行文件一致性校验? 为了确保你得到的文件是正确的版本,而没有被注入病毒和木马程序.例如我们经常在网上下载软件,而这些软件已经被注入了一些广告和病毒等,如果不进 ...
- jQuery.TreeView插件实现树状导航（十三）
一:jQuery.TreeView插件简介 该插件的特点: 1.支持静态的树,即一次性将全部数据加载到客户端. 2.支持异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据. 3.支持节点级联 ...
- Oracle回收站的清理方法
http://blog.itpub.net/18841027/viewspace-1057765/
- jenkins X实践系列（2） —— 基于jx的DevOps实践
jx是云原生CICD,devops的一个最佳实践之一,目前在快速的发展成熟中.最近调研了JX,这里为第2篇,使用已经安装好的jx来实践CICD,旨在让大家了解基于jx的DevOps是如何运转的,感兴趣 ...
- 逃离迷宫 HDU1728 （bfs）
和连连看非常相似 都是求转向的BFS 改了一下就上交了... #include<cstdio> #include<cstring> #include<algorith ...
- 【Java】 剑指offer(50-2) 字符流中第一个只出现一次的字符
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字 ...
- 类属性判断 hasattr getattr