幾款流行的HTML5 UI 框架比較

2021-09-07 18:48:04 字數 2558 閱讀 5704

手機html5開發,大部分都使用現有的框架,這裡簡單比較幾個流行的ui 框架。作者(啟明星工作室  比較一下幾款流行的html5框架,個人意見,僅供參考。

(1)mui

**: 

優點:mui是數字dclound推出的一款流行框架,個人感覺,這是目前最好的乙個h5 ui框架,使用簡單,操作方便。

缺點:mui為了達到原生效果,重新定義了form表單裡input,select,textarea所有的樣式,這給使用者自定義樣式帶來的不便。

例如下圖左圖是mui裡,直接使用標籤,是沒有下拉箭頭的,這會讓使用者迷惑。

右圖,我們可以在html**裡,重新定義select讓其顯示。}

其實,我在用bootstrap時,到想起當時bootstrap開發人員在定義table時的一句話,他們說他們本可以通過css重寫table,但是,因為有些**需要原始的table樣式,所以,為了和前者相容,他們方式了

通過全域性css改變table預設樣式,如果開發人員像使用bootstrap的table樣式,只要增加 就可以了,這樣,既不增加多少工作量,又能相容過去的程式。

我認為這點值得mui借鑑。

**:更主要的是,其css名稱與其他h5框架完全不一樣,以簡單的面板為例,公認的命名方式為:

class="

panel

">

class="

panel panel-header

">標題

class="

panel panel-body

">主體

但weui的命名類似如下:header縮寫成了hd,body所寫成了bd,類的名稱,你叫做page__title也沒問題,問題是page和title之間是2個下劃線,而有些採用類名稱採用:中劃線和下劃線一起用。

如weui-cell__hd。當你大量編寫頁面時,你腦子裡會不停的切換想著weui類到底叫什麼名字。

class="

page panel

">

class="

page__hd

">

class="

page__bd

">

class="

weui-cell

">

class="

weui-cell__hd

">class="

weui-label

">手機

class="

weui-cell__bd

">

class="

weui-input

" id="

mobile

" >

weui還有乙個致命缺點:多乙個span或者div都可能使得你的樣式完全失效。例如如下,可能僅僅在body與tab__hd之間多了乙個div,就會導致你頁面失效。

class=tab__hd>

和class=tab__hd>

(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 元件庫    因為是基於react.js的,感覺入門門檻挺高

(7)layui

** layer目前人氣極具上公升,不過她還是偏重於pc

較為流行的幾款前端框架

較為流行的幾款前端框架 1.jquery ui 2.bootstrap 優點 1.bootstrap 框架在布局 版式 控制項 特效方面都非常讓人滿意,都預置了豐富的效果,極大方便了使用者開發。2.這個目前好像很火似滴 3.微軟發布的vs2013正式版中,也已經將bootstrap3.0的版本加入了...

幾款ReactJS最優秀的UI框架

一.material ui material ui是一款react元件庫來實現google的material design風格ui介面框架。也是首個react的ui工具集之一。使用它可以快速搭建出賞心悅目的應用介面。英文文件 中文文件 github 二.react bootstrap react b...

HTML 5 GAME的幾款小遊戲例子推薦

html5 時代就要來了,連game也很多開始往html5上轉移,html5 game有幾個好處 1 跨平台瀏覽器 2 不用安裝 3 編寫維護快,容易 當然目前還有些問題,比如版權保護,渲染速度等,下面是幾個不錯的網上的小例子遊戲程式 1 是個迷宮的效果 2 webgl的小game,3d的 3 乙個...