人們經常使用的HTML5前端開發框架有哪些

　　根據近幾年HTML5技術的發展，用戶不斷追求更滿意的體驗度，Web應用程序變得愈來愈複雜，網站前端部分的工做獨立出來逐漸成爲如今的前端開發，前端開發工做者必須會利用HTML5前端框架作出更加符合客戶體驗的前端頁面。

　　市場上愈來愈多的公司在招聘前端開發崗位，但是前端開發並不容易，因此，這裏UIleader爲你們介紹一些常用的HTML5前端框架。

Bootstrap

首先說 Bootstrap，估計你也猜到會先說或者必定會有這個( 呵呵了 )，這是說明它的強大之處，擁有框架一壁江山的勢氣。本身剛入道的時候本着代碼任何一個字母都得本身敲出來擋我者廢的決心，來讓本身成長。結果受到周圍各 種基友的引誘開始了 Bootstrap 旅程。本人雖然是個設計+前端的萬里有一的人才，可是老天只讓我會用 PS 和各類設計工具卻不給我跟設計妹子同樣的審美，因此這也是我最初選擇 Bootstrap 的緣由之一，它讓我作出來的東西好歹能在妹子面前裝個逼，不過期間長了不免以爲 Bootstrap 美的讓人煩躁， 但好在它的每一個版本都會有很大的改變，不會讓人以爲本身作的網站會跟不少網站撞臉。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 做者閱攻城士無數，瞭解他們痛的結果 )，以致因而個小前端均可以快速上手，幾乎沒什麼學習成本。

　　官網：http://getbootstrap.com/

　　總結：Bootstrap 最大的優點就是它很是流行，流行就表明你有問題就有不少人幫你解決問題，就表明裝逼它就是利器，還有就是界面比較和諧，容易上手，關注它的童鞋應該發現最 新 V4 版也開始支持 FlexBox 佈局，這是很是好的升級體驗。 劣勢是 class 命名不夠語義化，而且各類縮寫，以致於我離了文檔就是個菜，最近開始整混合 APP，選框架的時候首選就是它，但以前搞 PC 一直沒注意，後來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來，Bootstrap 好小，小到我只好選擇別的框架。

　　AUI

第三個是最近剛起來的AUI，雖然做者聲稱是專爲APICloud開發者設計的一套UI框架，但實際它仍是解決了不少移動前端開發的廣泛問題，是主 要面向混合開發的 CSS 框架。看起來做者比較猖狂，各類高級 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的兼容性。不負衆望果真選的都是兼容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，而且框架還提供了聊天界面、計數列表等組件，解決了不少 複雜的讓我罵孃的佈局，如今能夠直接拿走就用。

　　官網：http://www.auicss.com/

　　總結：這個框架對我來講有個優勢就是純 CSS 框架，本身之前也就用過 Pure，本身有點 JS 能力，若是不是複雜的效果，找個純 CSS 框架本身隨便改改就能夠，而如今 CSS3 也已經可以作到動畫，效率、質量、高效全兼顧，因此仍是選擇了這種 CSS 框架。有一點以爲不滿的是這框架的文檔真的好那什麼，說好的高大上呢。

　　Amaze UI

第二個介紹的是妹子UI，最初使用它是由於本尊遇到了一個愛糾結細節設計士，有一次她跟個人字體較上真了，結果一句頂萬句的 BOOS 誇了她，我只好根據她的想法去解決，結果最後找到了Amaze UI 框架( 我不介意你叫我懶淫 )，按照官方的話說就是 「基於社區開源項目構建的一個跨屏前端框架，以移動優先，從小屏到大屏，最終實現全部屏幕適配，適應移動互聯潮流」 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。

　　官網：http://amazeui.org/

　　總結：AmazeUI總的來講就是加入更多符合中國市場特性的元素，框架對跨屏、適配都作了的比較好的處理而且準備一了一系列的經常使用的網頁組 件，爲減小搞兼容、適配各類敲鍵盤的加班狗們的工做時間作了不小的貢獻。，框架還對中文排版優化，兼容中國本土主流瀏覽器、輕量化，不只適用於桌面端，還 更更適合移動端、包含一些封裝好的Widgets。不過自也就我感受AmazeUI文檔是否有點太那什麼了，好比「人們不會在意jQuery的那 點流量。」，說實的在這真沒啥，不過我歷來不會說出來(哈哈)，代碼和設計上感受沒太多突出的點。

　　Frozen UI

有段時間看到 QQ 瞬間高大上了，後來四處打聽，原來 QQ 客服端也用了 混合開發，其中QQ會員前端用的是 Frozen UI，而且這套框架開源，欣喜若狂耐不住內心的寂寞直接上手試了一遍，初體驗感受基礎樣式效果簡單色調清爽，有個比較活躍的社區因此組件什麼的也比較豐富。

　　官網：http://frozenui.github.io/

　　總結：若是拿 Frozen UI 配合一些如 APICloud 用來作混合 APP 感受就太酷了，或者原生的火雞們拿去嵌套在應用中作前端開發，這個框架對 android 2.3 +、ios 4.0 + 作了兼容，或者拿來作 Web App 也是極好的選擇，劣勢的話從 UI 層面就能夠看到了，誰讓它是出生在QQ會員前端的呢。

　　WeUIi

第四個是WeUI和同FrozenUI都屬於差很少的WeUi了，也是一個比較專注的框架，WeUI應該說比FrozenUI前者更專注，話 說連個官網都不搞，全部答疑都在gitHubIssues解決了，這個框架極其簡單，體積固然就不用說了，模塊也就7個左右，不過體量雖然小作 的卻不錯，口碑看star就夠了，框架從16/1/23發版至今githubstar超過7K,不過也不排除用戶沒地方發泄因此都跑 到git上來，哈哈。

　　DEMO：http://weui.github.io/weui/

　　總結：看完微信設計團隊設計的這套DEMO，二話不說若是要作微信公衆，這個二話不說必然是首選了。框架很差的地方簡而言之就是框架自己應該就沒考慮過讓用戶用到非微信的場景之下。

　　SUI

「SUI是一套基於bootstrap開發的前端組件庫，同時它她也是一套設計規範。經過SUI，能夠很是方便的設計和實現精美的頁面」。果真 仍是直接引用官方給的枯燥無味廣告要節省本身的腦細胞(囧…)，固然了就像廣告說的，若是你以前用過Bootstrap，那麼能夠輕鬆轉 向SUI，這可能就是淘寶給前端屌絲們的福利了。

　　官網：http://sui.taobao.org/sui/docs/index.html

　　MUI

曾經一直使用Android系統的我，後來見到IOS，果斷移情別戀了，不知道爲何蘋果每次調整系統我都特別喜歡，後來一段時間由於缺設計 我專門模仿IOS系統作UI，但始終不可以作到很好，無心間就發現了MUI這個框架，這個框架給個人吸引之處就是它的UI是以IOS爲 主體設計的，固然它也補充了android特有UI樣式。而且MUI官方聲稱用來開發深刻之後發現拿它作APP還可以提升用戶使用流暢度，而後便試着 更深刻的瞭解和使用一段時間。

　　官網：http://dev.dcloud.net.cn/mui/

　　總結：就像以前說的這個框架是以兩大系統爲參照來封裝UI組件，框架自身還有一個較爲活躍的社區，不太好的地方這也是我特別關注的一點，關於開發應 用的流暢度，我固然知道這是H5目前的劣勢，可是看到官網給的描述，仍是抱着期待的心理試試看可否提高，然而它其實仍是須要是藉助Webview來 提高，而不是框架自己。

　　Semantic UI

倒數第三個是 Semantic UI，接觸這個框架仍是由於 Bootstrap，Semantic UI 剛上線 github 就受到大量開發者的關注，以致於不少人拿它倆對比各類挑刺各類誇，是好是壞不能單憑別人三句四句就擡起手指開始贊，用了之後感受 UI 上跟 Bootstrap 沒太多的區別，不過代碼命名規範上卻相差甚大，本人認爲 Semantic UI 是否是就想作的不同，它的命名全是採用複合的方式，類名特別的離散，用的時候你得很當心本身擴展或者新增的 class 命名與它的類名衝突。

　　官網：http://www.semantic-ui.cn/

　　 Foundation

Foundation 算是框架界的元老啦，都說框架去的早，而這個框架一直到如今依然這麼的熱門，若是你比較介意 Bootstrap 開發撞臉的尷尬事情，那麼你能夠考慮使用 Foundation 。即便你使用預約義的 UI 元素, 也不會與其餘網站太像，就像官方說的給開發者更靈活的框架體驗。

　　官網：http://foundation.zurb.com/

　　QUICK UI

QUICK UI是一套完整的企業級web前端開發解決方案，由基礎框架、UI組件庫、皮膚包、示例工程和文檔等組成。使用QUICKUI開發者能夠極大地減小工做量，提升開發效率，快速構建功能強大、美觀、兼容的web應用系統。

　　官網：www.uileader.com

　　QUICK UI優點：

　　①功能最爲強大

　　QUICKUI經歷了7年的迭代更新，不斷從客戶的各類業務中對組件的需求進行概括和抽離，從而打造新的組件和功能。如今最新的4.0版本框架包含了一百多種組件，一千多個應用場景示例。能夠說在前端框架領域中，QUICKUI擁有功能最強大組件庫。

　　②運行最爲穩定

　　不少其餘的第三方UI控件在簡單場合使用OK，到了複雜的場景中就會出現不少問題，這種現象很常見，由於在組件設計時沒法預料到全部的應用場合。而QUICKUI在7年間經歷了數千個項目實際檢驗，在各類複雜場景都應用過，並根據客戶的反饋不斷完善和調整。目前的第四代能夠說是最穩定、最完美的版本。

　　③豐富精美的界面皮膚

　　跟其餘web前端框架僅僅是一套組件庫不一樣，QUICKUI是一整套前端解決方案，擁有豐富的外觀界面解決方案。採用現今流行的扁平化設計理念，推出了包括登陸、響應式web、工做桌面、地圖類、門戶風格、大屏展現風格等等幾百套製做精美、用戶體驗優秀的界面。這些界面是以QUICKUI皮膚包的形式發佈，使用和更換都很是方便。

　　④事無鉅細的開發文檔

　　QUICKUI擁有16萬字+的開發文檔，框架和組件的每個功能點都有詳細的講解和代碼示例，用於開發過程當中隨時查閱。除了框架機制講解和組件使用教程，文檔還涉及web前端開發的不少知識。仔細閱讀並結合框架使用的話，你很快就能成爲web開發的高手。

　　⑤上手開發很是容易

　　QUICKUI採用組件化思想來構建組件，一個組件就是一兩句html的標籤，使用起來很是簡單。將開發人員從繁瑣的JS編碼中解脫出來，很大程度減小前臺編碼的出錯率；保留了HTML的佈局方式，從而快速進行頁面佈局。對開發者前臺技術要求也很是低，只須要了解html語法和一些簡單的JS便可，從而把更多精力放在業務功能的實現上，極大地提升開發效率。

　　⑥瀏覽器兼容性很是好

　　QUICKUI4.0使用了不少HTML5，CSS3技術用於提升表現力和用戶體驗，這些新的特性在現代瀏覽器中會有很好的效果。可是，國內依然有大量的用戶在使用IE七、IE8等舊時代的瀏覽器，爲照顧這部分用戶，框架採用了漸進式思想，確保低版本瀏覽器也能正常使用。因此，QUICKUI兼容IE7以上全部主流瀏覽器。

　　這些HTML5前端框架好處頗豐：能爲您提跨瀏覽器，前端框架都在不一樣的瀏覽器測試經過；擁有一致性，UI組件，如導航，按鈕，標籤，表單，下拉菜單，表格...他們的風格都相互統一；能夠快速開發，您能夠輕鬆，快速的構建一個佈局。他們一般有代碼片斷和優秀的文檔；響應式，全部CSS組件和Javascript插件可以從桌面擴展到移動端。

轉載來源：http://www.uileader.com/news/news_content_48.html