这篇文章主要介绍“html中流行的框架有哪些”,在日常操作中,相信很多人在html中流行的框架有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html中流行的框架有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
优点: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>
就可以了,这样,既不增加多少工作量,又能兼容过去的程序。
我认为这点值得 MUI 借鉴。
优点: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">
<h2 class="page__title">Title</h2>
</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>
优点:这应该是最早的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)">
优点:兼容PC和手机,其推出的理念与样式,启发了很多后起之秀,例如将页面分成12份,根据分辨率不同,自动组合灯。在PC样式上,具有不可替代的作用。
缺点:也正因为他需要兼容PC和手机,使得虽然PC样式很优秀,但是手机效果只能说是“中规中矩”,毕竟“又想马儿跑得快,又想马儿不吃草”是不现实的。
没用过,但是看起来还不错,值得推挤。
没用过,其实Amaze
有基于 React.js
的移动端 Web
组件库 http://t.amazeui.org因为是基于React.js
的,感觉入门门槛挺高
Layer目前人气极具上升,不过她还是偏重于PC。
到此,关于“html中流行的框架有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。