html5的前端框架有哪些

html前端框架有：Bootstrap、AUI、Amaze UI、Frozen UI、Frozen UI、WeUIi、SUI、AUI、MUI、Semantic UI、Foundation、UiKit、Pure等。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML5前端框架

#Bootstrap

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

官網：http://getbootstrap.com/

Github：https://github.com/twbs/bootstrap/

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

AUI

第三個是最近剛起來的AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI框架，但實際它還是解決了很多行動前端開發的普遍問題，是主要面向混合開發的CSS 框架。看起來作者比較猖狂，各種高級 CSS3 遍地使用，這讓我也要去查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，並且框架還提供了聊天界面、計數列表等組件，解決了很多複雜的讓我罵娘的佈局，現在可以直接拿走就用。

Github：https://github.com/liulangnan/aui

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

總結：這個框架對我來說來說有個優點就是純CSS 框架，自己以前也就用過Pure，自己有點JS 能力，如果不是複雜的效果，找個純CSS 框架自己隨便改改就可以，而現在CSS3 也已經能夠做到動畫，效率、品質、高效全兼顧，所以還是選擇了這種CSS 框架。有一點覺得不滿的是這框架的文件真的好那什麼，說好的高大上呢。

Amaze UI

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

官網：http://amazeui.org/

Github：https://github.com/amazeui/amazeui

總結：Amaze UI 總的來說是加入更多符合中國市場特性的元素，框架對跨屏、適配都做了的比較好的處理並且準備一了一系列的常用的網頁組件，為減少搞兼容、適配各種敲鍵盤的加班狗狗們的工作時間做了不小的貢獻。 ，框架也對中文排版優化，相容於中國本土主流瀏覽器、輕量化，不僅適用於桌面端，還 更適合行動端、包含一些封裝好的Widgets。不過自也就我感覺Amaze UI 文件是否有點太那什麼了，比如“人們不會在乎jQuery的那點流量。”，說實的在這真沒啥，不過我從來不會說出來( 哈哈)，程式碼和設計上感覺沒太多突出的點。

Frozen UI

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

Github：https://github.com/frozenui/frozenui

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

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

Frozen UI

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

Github：https://github.com/frozenui/frozenui

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

總結：如果拿Frozen UI 配合一些如APICloud 用來做混合APP 感覺就太酷了，或者原生的火雞們拿去嵌套在應用中做前端開發，並且這個框架對android 2.3 、ios 4.0 做了兼容，或者拿來做Web app也是極佳的選擇，不過要是放在微信裡比這更合適的WeUI 框架更是首選了，劣勢的話從UI 層面就可以看到了，誰讓它是出生在QQ會員前端的呢。

WeUIi

第四個是WeUI和同FrozenUI都屬於差不多的WeUi了，也是一個比較專一的框架，WeUI應該說比FrozenUI前者更專一，話說連個官網都不搞，所有答疑都在gitHub Issues 解決了，這個框架極其簡單，體積當然就不用說了，模組也就7 個左右，不過體量雖然小做的卻不錯，口碑看star 就夠了，框架從16/1/23 發版至今github star 超過7K,不過也不排除用戶沒地方發洩所以都跑到git 上來，哈哈。

Github：https://github.com/weui/weui

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

總結：看完微信設計團隊設計的這套DEMO，二話不說如果要做微信大眾，這個二話不說必然是首選了。框架不好的地方簡而言之就是框架本身應該就沒考慮過讓使用者用到非微信的場景之下。

SUI

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

Github：https://github.com/sdc-alibaba/sui

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

Star：120

AUI

第六個是最近剛起來的最近剛起來的AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI框架，但實際它還是解決了許多行動前端開發的普遍問題，是它主要針對混合開發的CSS 框架。 ，所以看起來作者比較猖狂，各種高級 CSS3 遍地使用，這也使得我必須去檢查這些 個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，並且框架還提供了聊天界面、計數列表等組件，解決了很多複雜的讓我罵娘的佈局，現在可以直接拿走就用。

Github：https://github.com/liulangnan/aui

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

總結：這個框架對我來說來說有個優點就是純CSS 框架，自己以前也就用過Pure，自己有點js 能力，如果不是複雜的效果自己找個純CSS 框架自己隨便改改就能達到效果，而現在CSS3 也已經能夠做到各種動畫，效率、品質、高效各種一頓考慮所以還是選擇了這種CSS 框架。而一直覺得不滿的是這框架的文檔真的好那什麼，說好的高大上呢。

MUI

#

曾經一直使用Android 系統的我，後來見到IOS，果斷移情別戀了，不知道為什麼蘋果每次調整系統我都特別喜歡，後來一段時間因為缺設計我專門模仿IOS 系統做UI，但始終不能夠做到很好，無意間就發現了MUI 這個框架，這個框架給我的吸引之處就是它的UI 是以IOS 為主體設計的，當然它也補充了android特有UI樣式。而MUI官方聲稱用來開發深入以後發現拿它做 APP 還能夠提高用戶使用流暢度，然後便試著 更深入的了解和使用一段時間。

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

Github：https://github.com/dcloudio/mui

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

Semantic UI

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

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

Github：https://github.com/semantic-org/semantic-ui/

#Foundation

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

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

Github：https://github.com/zurb/foundation-sites

UiKit

UIkit是由YOOtheme團隊開發的，在許多WordPress主題中都有應用(也就是如果你是個WordPress 愛好者，那麼這個框架應該比較適合深究)，並且框架能夠通過GUI編輯器和手動編輯，所以它提供了一個靈活、強大的自訂機制。框架借助LESS、 jQuery、normalize.css及FontAwesome開源專案的獨有特點，整合成了這麼一款輕量級、模組化的前端框架。

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

Github：https://github.com/uikit/uikit

Pure

終於最後一個了，我和你一樣好開森(～￣▽￣)～)，這個框架是我在做管理系統時接觸的，選擇使用也是因為框架小巧，並且是純CSS ，沒有太多的牽扯，好用來與其他框架快速結合使用。

官網：http://purecss.io/

Github：https://github.com/yahoo/pure/

推薦教學：《html影片教學》

以上是html5的前端框架有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！