在 html 中的越來越受歡迎中,更多不同的框架也在不斷的涌現(xiàn)出來。那么今天我們就來說說:“在html中有幾款流行的框架?”這個(gè)問題,那么對(duì)于HTML中的框架小編收集整理的相關(guān)內(nèi)容,如下所示:
(1)MUI
網(wǎng)址:http://dev.dcloud.net.cn/mui/
優(yōu)點(diǎn):MUI 是數(shù)字 dclound 推出的一款流行框架,個(gè)人感覺,這是目前最好的一個(gè) H5 UI框架,使用簡單,操作方便。
缺點(diǎn):MUI 為了達(dá)到原生效果,重新定義了?Form
?表單里?input
?,?select
?,?textarea
?所有的樣式,這給用戶自定義樣式帶來的不便。
例如下圖左圖是 MUI 里,直接使用<select>標(biāo)簽,是沒有下拉箭頭的,這會(huì)讓用戶迷惑。
右圖,我們可以在 HTML 代碼里,重新定義 ?select
?讓其顯示。
select {
-webkit-appearance: menulist !important;
}
其實(shí),我在用 ?bootstrap
? 時(shí),到想起當(dāng)時(shí) ?bootstrap
?開發(fā)人員在定義?table
?時(shí)的一句話,他們說他們本可以通過?CSS
?重寫?table
?,但是,因?yàn)橛行┚W(wǎng)站需要原始的 ?table
?樣式,所以,為了和前者兼容,他們方式了
通過全局?CSS
?改變?table
?默認(rèn)樣式,如果開發(fā)人員像使用?bootstrap
?的?table
?樣式,只要增加? <table>
? 就可以了,這樣,既不增加多少工作量,又能兼容過去的程序。
我認(rèn)為這點(diǎn)值得 MUI 借鑒。
(2)WeUI
網(wǎng)址:https://weui.io/
優(yōu)點(diǎn):WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫,由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì),令用戶的使用感知更加統(tǒng)一。所以,其樣式基本上核微信“長”的一樣。
缺點(diǎn):抱歉,我對(duì) WeUI 的評(píng)價(jià)不高,這和騰訊的大名完全不符。我原本對(duì) WeUI 期望甚高,結(jié)果實(shí)際測試非常令人失望。這些失望表現(xiàn)在太過于微信化,限制了他是使用廣度。
更主要的是,其 CSS 名稱與其他 H5 框架完全不一樣,以簡單的面板為例,公認(rèn)的命名方式為:
<div class="panel">
<div class="panel panel-header">
標(biāo)題
</div>
<div class="panel panel-body">
主體
</div>
</div>
但weui的命名類似如下:?header
?縮寫成了?hd
?,?body
?所寫成了?bd
?,類的名稱,你叫做?page__title
?也沒問題,問題是?page
?和?title
?之間是2個(gè)下劃線,而有些采用類名稱采用:中劃線和下劃線一起用。
如?weui-cell__hd
?。當(dāng)你大量編寫頁面時(shí),你腦子里會(huì)不停的切換想著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">手機(jī)</label></div>
<div class="weui-cell__bd">
<span class="weui-input" id="mobile" ></span>
</div>
</div>
</div>
</div>
WeUI還有一個(gè)致命缺點(diǎn):多一個(gè)?span
?或者?div
?都可能使得你的樣式完全失效。例如如下,可能僅僅在?body
?與?tab__hd
?之間多了一個(gè)?div
?,就會(huì)導(dǎo)致你頁面失效。
<body>
<div class=tab__hd>
</div>
</div>
</body>
和
<body>
<div>
<div class=tab__hd>
</div>
</div>
</div>
</body>
<body>
<div class=tab__hd>
</div>
</div>
</body>
和
<body>
<div>
<div class=tab__hd>
</div>
</div>
</div>
</body>
(3)Jquery Mobile
網(wǎng)址:http://jquerymobile.com/
優(yōu)點(diǎn):這應(yīng)該是最早的HTML5框架,
缺點(diǎn):Jquery雖然很流行,但是不得不說?JqueryMobile
?是一個(gè)失敗的作品?,F(xiàn)在好像都停止更新了。JM最大的缺點(diǎn)是速度太慢。
這也難怪,瀏覽器支持的是?CSS
?與?JS
?,但是JM通過自定義很多?data-*
?來重寫渲染最終的樣式,
例如如下代碼的?data-enhanced,data-icon
?,這些?data-*
?屬性,瀏覽器并不能識(shí)別,需要?JM
?的?JS
?引擎解釋后,轉(zhuǎn)換為CSS語言,當(dāng)頁面大量使用這些?data-*
?屬性時(shí),其性能極具下降,現(xiàn)在應(yīng)該沒什么人使用了。
<input type="button" data-enhanced="true" value="Enhanced - Left">
<input type="button" data-icon="delete" value="Left (default)">
<input type="button" data-enhanced="true" value="Enhanced - Left">
<input type="button" data-icon="delete" value="Left (default)">
(4)Bootstrap
網(wǎng)址:http://www.bootcss.com/
優(yōu)點(diǎn):兼容PC和手機(jī),其推出的理念與樣式,啟發(fā)了很多后起之秀,例如將頁面分成12份,根據(jù)分辨率不同,自動(dòng)組合燈。在PC樣式上,具有不可替代的作用。
缺點(diǎn):也正因?yàn)樗枰嫒軵C和手機(jī),使得雖然PC樣式很優(yōu)秀,但是手機(jī)效果只能說是“中規(guī)中矩”,畢竟“又想馬兒跑得快,又想馬兒不吃草”是不現(xiàn)實(shí)的。
(5)Framework7
網(wǎng)址:http://www.framework7.cn/
沒用過,但是看起來還不錯(cuò),值得推擠。
(6)Amaze UI
網(wǎng)址:http://amazeui.org
沒用過,其實(shí)?Amaze
?有基于 ?React.js
? 的移動(dòng)端 ?Web
? 組件庫 http://t.amazeui.org因?yàn)槭腔?React.js
?的,感覺入門門檻挺高
(7)Layui
網(wǎng)址http://www.layui.com
Layer目前人氣極具上升,不過她還是偏重于PC。
以上就是有關(guān)于:“在html中有幾款流行的框架?”這個(gè)問題的相關(guān)內(nèi)容,當(dāng)然還有其他的框架我們沒有介紹到,那么對(duì)于更多有關(guān)于 html這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。希望以上的內(nèi)容可以幫助到大家。