最流行的5個前端框架對比

　　現在出現了大量的CSS前端框架，但真正優秀的框架只有少數幾個。

　　本文將會比較其中五個最佳的框架。每一個框架都有本身的優勢和缺點，以及具體的應用領域，你能夠根據本身的具體項目需求進行選擇。此外，許多選項都是模塊化的，容許你僅使用所需的組件，甚至能夠混合使用來自不一樣框架的組件。

　　本文依據各個框架的GitHub流行度來順序介紹。

　　Bootstrap

　　Bootstrap是目前可用框架中無可爭議的領導者。其人氣日益增加，你能夠放心的選擇這個框架，而沒必要擔憂項目會失敗，由於具備普遍使用基礎的框架，不太可能被拋棄。

　　

　　創做者： Mark Otto 和 Jacob Thornton.

　　發行： 2011

　　當前版本： 3.3.7

　　人氣： GitHub上有111,000顆星

　　說明： 「Bootstrap是最流行的HTML，CSS和JavaScript框架，用於在網絡上開發響應式、移動的Web項目。

　　核心概念/原則： RWD和移動端優先。

　　框架大小： 154 KB

　　預處理器： Less和Sass

　　響應式佈局：是

　　模塊化：是

　　啓動模板/佈局：是

　　圖標集： Glyphicons Halflings設置

　　附加/附件：無捆綁，許多第三方插件可用。

　　獨特組件： Jumbotron

　　文檔資源：良好

　　自定製：基本GUI定製器。可是你須要手動輸入顏色值，由於沒有顏色選擇器可用。

　　瀏覽器支持： Firefox，Chrome，Safari，IE8 +(您須要IE8的Respond.js)

　　許可證： MIT

　　Bootstrap說明

　　Bootstrap的普遍流行是它的優點所在。在技術上，它不必定比列表中的其它框架更好，但它提供了比其它四個框架更多的資源(文章和教程、第三方插件和擴展、主題構建器等)。簡而言之，Bootstrap 無處不在，這是人們繼續選擇的主要緣由。

　　Foundation

　　Foundation是排在第二名的框架。ZURB這樣堅實的公司一直支持着Foundation，因此這個框架有強大的基礎。Foundation現已用於許多大型網站，包括Facebook，Mozilla，Ebay，Yahoo!和國家地理等。

　　

　　創做者： ZURB

　　發行： 2011

　　當前版本： 6.3.1

　　人氣： GitHub上有25,400顆星

　　說明： 「世界上最早進的響應式前端框架」

　　核心概念/原則： RWD，移動端優先，語義。

　　框架大小： 197.5 KB

　　預處理器： Sass

　　響應式佈局：是

　　模塊化：是

　　啓動模板/佈局：是

　　圖標集： 基礎圖標字體

　　額外/附加組件：是

　　獨特的組件： Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

　　文檔資源：良好，還有許多額外資源。

　　自定製：基本的GUI定製程序，相似於Bootstrap定製工具。

　　瀏覽器支持： Chrome，Firefox，Safari，IE9 +; iOS，Android，Windows Phone 7+

　　許可證：MIT

　　Foundation說明

　　Foundation是一個真正的專業框架，提供業務支持、培訓和諮詢。它還提供了許多資源來幫助你更快更輕鬆地學習和使用該框架。

　　Semantic UI

　　Semantic UI是一個語義化設計的前端開源框架。它利用天然語言原理，從而使代碼更加可讀和可理解。

　　

　　創做者： Jack Lukic

　　發行： 2013

　　當前版本： 2.2

　　人氣： GitHub上有34,762顆星

　　說明： 「基於天然語言原則的UI組件框架」。

　　核心概念/原則：Semantic, tag ambivalence, responsive。

　　框架大小： 806 KB

　　預處理器：少

　　響應式佈局：是

　　模塊化：是

　　啓動模板/佈局：是，並提供了一些基本的入門模板

　　圖標集： Font Awesome

　　額外/附加組件：否

　　獨特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。

　　文檔資源：很是好，Semantic提供了一個很是有組織的文檔，另外還有一個單獨的網站提供入門指南、自定義和建立主題。

　　自定義：沒有GUI定製器，只有手動定製。

　　瀏覽器支持： Firefox，Chrome，Safari，IE10 +(僅IE9瀏覽器前綴)，Android 4，Blackberry 10

　　許可證：MIT

　　Semantic UI說明

　　Semantic是這裏所討論的全部框架中，最具創新性和全功能的框架。其框架的整體結構、類中清晰邏輯的命名約定方式和語義方面也超過了其它框架。

　　Pure

　　Pure是一種輕量級的模塊化框架，採用純CSS編寫，具備可根據須要一塊兒使用或單獨使用的組件。

　　

　　創做者：雅虎

　　發行： 2013

　　當前版本： 0.6.2

　　流行度： GitHub上有16,637顆星

　　說明： 「一套小而靈活的CSS模塊，可以在每一個Web項目中使用。」

　　核心概念/原則： SMACSS，極簡主義。

　　框架大小： 16 KB

　　預處理：無

　　響應式佈局：是

　　模塊化：是

　　啓動模板/佈局：是

　　圖標集：無。能夠改用Font Awesome。

　　額外/附加組件：無

　　獨特組件：無

　　文檔資源：很好

　　自定義：基本GUI皮膚生成器

　　瀏覽器支持：最新版本的Firefox，Chrome，Safari; IE7 +; iOS 6.x，7.x; Android 4.x

　　許可證： Yahoo! Inc. BSD

　　Pure說明

　　Pure爲你的項目提供了一個乾淨的開始，只提供基本框架。對於不須要全功能框架但僅包含在其工做中的特定組件的人來講，Pure是一個理想的選擇。

　　UIkit

　　UIkit是一個易於使用和自定義的組件的簡潔集合。雖然它不像其它框架那樣受歡迎，但它提供了相同的功能和質量。

　　

　　創造者： YOOtheme

　　發行： 2013

　　當前版本： 3.0.0

　　人氣：GitHub GitHub上有9,422顆星

　　說明： 「用於開發快速而強大的Web界面的輕量級和模塊化的前端框架」。

　　核心概念/原則： RWD，移動端優先

　　框架大小： 326.9 KB(若是包含uikit-icons.min.js與SVG圖標相關的功能，則爲384.4 KB )

　　預處理器：少，Sass

　　響應式佈局：是

　　模塊化：是

　　啓動模板/佈局：是

　　圖標集： UIkit自帶SVG圖標系統和類庫，其中包含愈來愈多的大綱圖標。

　　額外/附加組件：是

　　獨特的組件：Article, Flex, Cover, HTML Editor

　　文件：好

　　自定義：高級GUI定製程序僅在版本2(之前的版本)中可用

　　瀏覽器支持： Chrome，Firefox，Safari，IE9 +

　　許可證：MIT

　　UIkit說明

　　UIkit成功應用在許多WordPress主題中。它提供了靈活和強大的手動定製機制(之前版本的框架還提供了高級GUI定製程序)。

　　什麼是最適合你的框架?

　　在選擇框架時，能夠從如下幾個方面考慮：

　　所選的框架有足夠的人氣嗎?更多的人氣意味着更多的人蔘與項目，也意味着有更多的教程和社區文章、更多的實例和網站、更多的第三方擴展、更好的相關的Web產品可與其集成。受歡迎程度也意味着框架更具前瞻性，由於具備更大社區的框架不太可能被拋棄。

　　框架是否正在積極發展?一個好的框架須要不斷地使用最新的web技術，特別是在移動端方面。

　　框架是否達到成熟?若是一個特定的框架在現實項目中尚未被使用和測試，那麼將其用於你的專業項目，可能不是一個明智的選擇。

　　框架是否提供了良好的文檔?爲了方便學習過程，老是須要良好的文檔。

　　框架的特異性是什麼?這裏的要點是，與具備高級別特異性的框架相比，更通用的框架更容易使用。在大多數狀況下，最好選擇一個應用最小樣式的框架，由於它更容易自定義。與重寫現有的CSS規則相比，添加新的CSS規則是一個更方便有效的作法。

　　若是你還不肯定使用哪一個框架，那麼能夠採用混合搭配的方式。當某個特定的框架不能知足你的需求時，能夠混合使用兩個或多個項目的組件。

　　最後值得一提的是，如今Flexbox和Grid Layout在主流瀏覽器的最新版本中獲得很好的支持，比以往任什麼時候候都更容易構建複雜的佈局。這可能會鼓勵更多的開發人員放棄前端框架，從頭開始編寫他們本身想要的佈局。

​