10大H5前端框架，讓你開發不愁

時間 2019-11-24

標籤 h5 前端框架讓你開發不愁简体版

原文原文鏈接

做爲一名在前端死纏爛打6年並且懶到不行的攻城獅，這幾年閱過很是多從知名到很是知名的前端框架。原本想拿15-20個框架來分享一下，但在跟幾個前輩討教寫文章的技巧時果斷被無情的打擊了，因此這裏我仍是低調的僅僅拿出10個框架來個大鍋亂燉，湊夠字數也就全劇終了。如下的框架也沒有什麼前後順序之分，我想到啥就寫啥啦( 做爲前端，我一貫都這麼的任性 ^_^ )。
css

Bootstrap
html

首先說 Bootstrap，預計你也猜到會先說或者必定會有這個( 呵呵了 )，這是說明它的強大之處。擁有框架一壁江山的勢氣。前端

本身剛入道的時候本着代碼不論什麼一個字母都得本身敲出來擋我者廢的決心，來讓本身成長。android

結果受到周圍各類基友的引誘開始了 Bootstrap 旅程。本人儘管是個設計+前端的萬里有一的人才，但是老天僅僅讓我會用 PS 和各類設計工具卻不給我跟設計妹子同樣的審美，因此這也是我最初選擇 Bootstrap 的緣由之中的一個，它讓我作出來的東西好歹能在妹子面前裝個逼，只是時間長了不免認爲 Bootstrap 美的讓人煩躁，但好在它的每個版本號都會有很是大的改變，不會讓人認爲本身作的站點會跟很是多站點撞臉。ios

Bootstrap 的使用方法及其簡單( 這也可能就是 Bootstrap 做者閱攻城士無數，瞭解他們痛的結果)，以致因而個小前端都可以高速上手，差點兒沒什麼學習成本。
git

官網：http://getbootstrap.com/
Github：https://github.com/twbs/bootstrap/
做者：Mark Otto 和Jacob Thornton Star：93,112github

總結：Bootstrap 最大的優點就是它很流行，流行就表明你有問題就有許多人幫你解決這個問題。就表明裝逼它就是利器。還有就是界面比較和諧，easy上手。關注它的童鞋應該發現最新 V4 版也開始支持 FlexBox 佈局，這是很好的升級體驗。bootstrap

劣勢是 class 命名不夠語義化，並且各類縮寫，以致於我離了文檔就是個菜。近期開始整混合 APP，選框架的時候首選就是它，但以前搞 PC 一直沒注意，後來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來。Bootstrap 好小。小到我僅僅好選擇別的框架。瀏覽器

Amaze UI
前端框架

第二個介紹的是妹子UI。最初使用它是因爲本尊遇到了一個愛糾結細節設計士，有一次她跟個人字體較上真了。結果一句頂萬句的BOOS 誇了她，我僅僅好依據她的想法去解決，結果最後找到了Amaze UI 框架( 我不介意你叫我懶淫)，依照官方的話說就是「基於社區開源項目構建的一個跨屏前端框架，以移動優先。從小屏到大屏。終於實現所有屏幕適配，適應移動互聯潮流」。

但事實上我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。

官網：http://amazeui.org/
Github：https://github.com/amazeui/amazeui
所屬公司：雲適配 Star：6710

總結：Amaze UI 總的來講增長不少其它符合中國市場特性的元素，框架對跨屏、適配都作了比較好的處理並且準備了一系列的常用網頁組件，爲下降搞兼容、適配各類敲鍵盤的加班狗們的工做時間作了不小的貢獻。框架還對中文排版優化，兼容中國本土主流瀏覽器、輕量化，不只適用於桌面端，更適合移動端。

AUI

第三個是近期剛起來的AUI，儘管做者聲稱是專爲APICloud開發人員設計的一套UI框架。但實際它仍是攻克了很是多移動前端開發的廣泛問題，是主要面向混合開發的 CSS 框架。看起來做者比較猖狂，各類高級 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的兼容性。

不負衆望果真選的都是兼容不錯的屬性。哈哈了一頓激動從前輩手上大膽認識了幾個好東西，並且框架還提供了聊天界面、計數列表等組件，攻克了很是多複雜的讓我罵孃的佈局，現在可以直接拿走就用。

Github：https://github.com/liulangnan/aui
官網：http://www.auicss.com/
做者：流浪男 Star：92

總結：這個框架對我來講有個長處就是純 CSS 框架。本身曾經也就用過 Pure，本身有點 JS 能力。假設不是複雜的效果，找個純 CSS 框架本身隨便改改就行，而現在 CSS3 也已經能夠作到動畫。效率、質量、高效全兼顧，因此仍是選擇了這樣的 CSS 框架。有一點認爲不滿的是這框架的文檔真的好那什麼，說好的高大上呢。

Frozen UI

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

Github：https://github.com/frozenui/frozenui
官網：http://frozenui.github.io/
做者： QQVIP FD Team Star：1,067

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

WeUI

WeUI和 FrozenUI都屬於比較專注的框架，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/
Star：7,129

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

SUI

「SUI 是一套基於bootstrap開發的前端組件庫，同一時候它也是一套設計規範。經過SUI，可以很方便的設計和實現精美的頁面」。

果真仍是直接引用官方給的枯燥無味廣告要節省本身的腦細胞( 囧… )，固然了就像廣告說的，假設你以前用過 Bootstrap，那麼可以輕鬆轉向 SUI，這可能就是淘寶給前端屌絲們的福利了。

Github：https://github.com/sdc-alibaba/sui
官網：http://sui.taobao.org/sui/docs/index.html
Star：120

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
Star：22,736

UiKit

UIkit是YOOtheme團隊開發的，在不少WordPress主題中都有應用(也就是假設你是個 WordPress 愛好者，那麼這個框架應該比較適合深究)。並且框架能夠經過GUI編輯器和手動編輯，因此它提供了一個靈活、強大的本身定義機制。框架藉助LESS、jQuery、normalize.css及FontAwesome開源項目的獨有特色。整合成了這麼一款輕量級、模塊化的前端框架。