本文來自于：葡萄城控件技術(shù)團(tuán)隊博客
如今出現(xiàn)了大量的CSS前端框架吟秩，但真正優(yōu)秀的框架只有少數(shù)幾個。
本文將會比較其中五個最佳的框架始苇。每個框架都有自己的優(yōu)點和缺點瓦宜，以及具體的應(yīng)用領(lǐng)域，你可以根據(jù)自己的具體項目需求進(jìn)行選擇贺待。此外徽曲，許多選項都是模塊化的，允許你僅使用所需的組件狠持，甚至可以混合使用來自不同框架的組件疟位。
本文依據(jù)各個框架的GitHub流行度來順序介紹。
Bootstrap
Bootstrap是目前可用框架中無可爭議的領(lǐng)導(dǎo)者喘垂。其人氣日益增長甜刻，你可以放心的選擇這個框架，而不必?fù)?dān)心項目會失敗正勒，因為具有廣泛使用基礎(chǔ)的框架得院，不太可能被拋棄。
創(chuàng)作者：Mark Otto和Jacob Thornton.
發(fā)行：?2011
當(dāng)前版本：?3.3.7
人氣：?GitHub上有111,000顆星
說明：?“Bootstrap是最流行的HTML章贞，CSS和JavaScript框架祥绞，用于在網(wǎng)絡(luò)上開發(fā)響應(yīng)式、移動的Web項目鸭限。
核心概念/原則：RWD和移動端優(yōu)先蜕径。
框架大小：?154 KB
響應(yīng)式布局：是
模塊化：是
啟動模板/布局：是
圖標(biāo)集：GlyphiconsHalflings設(shè)置
附加/附件：無捆綁败京，許多第三方插件可用兜喻。
獨特組件：?Jumbotron
文檔資源：良好
自定制：基本GUI定制器。但是你需要手動輸入顏色值赡麦，因為沒有顏色選擇器可用朴皆。
瀏覽器支持：?Firefox帕识，Chrome，Safari遂铡，IE8 +（您需要IE8的Respond.js）
許可證：MIT
Bootstrap說明
Bootstrap的廣泛流行是它的優(yōu)勢所在肮疗。在技??術(shù)上，它不一定比列表中的其它框架更好扒接，但它提供了比其它四個框架更多的資源（文章和教程伪货、第三方插件和擴(kuò)展、主題構(gòu)建器等）珠增。簡而言之超歌，Bootstrap?無處不在砍艾，這是人們繼續(xù)選擇的主要原因蒂教。
Foundation
Foundation是排在第二名的框架。ZURB這樣堅實的公司一直支持著Foundation脆荷，所以這個框架有強(qiáng)大的基礎(chǔ)凝垛。Foundation現(xiàn)已用于許多大型網(wǎng)站，包括Facebook蜓谋，Mozilla梦皮，Ebay，Yahoo桃焕！和國家地理等剑肯。
創(chuàng)作者：?ZURB
發(fā)行：?2011
當(dāng)前版本：?6.3.1
人氣：?GitHub上有25,400顆星
說明：?“世界上最先進(jìn)的響應(yīng)式前端框架”
核心概念/原則：?RWD，移動端優(yōu)先观堂，語義让网。
框架大小：?197.5 KB
預(yù)處理器：?Sass
響應(yīng)式布局：是
模塊化：是
啟動模板/布局：是
圖標(biāo)集：基礎(chǔ)圖標(biāo)字體
額外/附加組件：是
獨特的組件： Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
文檔資源：良好师痕，還有許多額外資源溃睹。
自定制：基本的GUI定制程序，類似于Bootstrap定制工具胰坟。
瀏覽器支持：?Chrome因篇，F(xiàn)irefox，Safari笔横，IE9 +;?iOS竞滓，Android，Windows Phone 7+
許可證：MIT
Foundation說明
Foundation是一個真正的專業(yè)框架吹缔，提供業(yè)務(wù)支持商佑、培訓(xùn)和咨詢。它還提供了許多資源來幫助你更快更輕松地學(xué)習(xí)和使用該框架涛菠。
Semantic UI
Semantic UI是一個語義化設(shè)計的前端開源框架莉御。它利用自然語言原理撇吞，從而使代碼更加可讀和可理解。
創(chuàng)作者：Jack Lukic
發(fā)行：?2013
當(dāng)前版本：?2.2
人氣：?GitHub上有34,762顆星
說明：?“基于自然語言原則的UI組件框架”礁叔。
核心概念/原則：Semantic, tag ambivalence, responsive牍颈。
框架大小：?806 KB
預(yù)處理器：少
響應(yīng)式布局：是
模塊化：是
啟動模板/布局：是琅关，并提供了一些基本的入門模板
圖標(biāo)集：?Font Awesome
額外/附加組件：否
獨特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape煮岁。
文檔資源：非常好，Semantic提供了一個非常有組織的文檔涣易，另外還有一個單獨的網(wǎng)站提供入門指南画机、自定義和創(chuàng)建主題。
自定義：沒有GUI定制器新症，只有手動定制步氏。
瀏覽器支持：?Firefox，Chrome徒爹，Safari荚醒，IE10 +（僅IE9瀏覽器前綴），Android 4隆嗅，Blackberry 10
許可證：MIT
Semantic UI說明
Semantic是這里所討論的所有框架中界阁，最具創(chuàng)新性和全功能的框架。其框架的總體結(jié)構(gòu)胖喳、類中清晰邏輯的命名約定方式和語義方面也超過了其它框架泡躯。
Pure
Pure是一種輕量級的模塊化框架，采用純CSS編寫丽焊，具有可根據(jù)需要一起使用或單獨使用的組件较剃。
創(chuàng)作者：雅虎
發(fā)行：?2013
當(dāng)前版本：?0.6.2
流行度：?GitHub上有16,637顆星
說明：?“一套小而靈活的CSS模塊，能夠在每個Web項目中使用粹懒≈馗叮”
核心概念/原則：SMACSS，極簡主義凫乖。
框架大腥返妗：?16 KB
預(yù)處理：無
響應(yīng)式布局：是
模塊化：是
啟動模板/布局：是
圖標(biāo)集：無∶毖浚可以改用Font Awesome删掀。
額外/附加組件：無
獨特組件：無
文檔資源：很好
自定義：基本GUI皮膚生成器
瀏覽器支持：最新版本的Firefox，Chrome导街，Safari;?IE7 +;?iOS 6.x披泪，7.x;?Android 4.x
許可證：Yahoo!?Inc. BSD
Pure說明
Pure為你的項目提供了一個干凈的開始，只提供基本框架搬瑰。對于不需要全功能框架但僅包含在其工作中的特定組件的人來說款票，Pure是一個理想的選擇控硼。
UIkit
UIkit是一個易于使用和自定義的組件的簡潔集合。雖然它不像其它框架那樣受歡迎艾少，但它提供了相同的功能和質(zhì)量卡乾。
創(chuàng)造者：YOOtheme
發(fā)行：?2013
當(dāng)前版本：?3.0.0
人氣：GitHub GitHub上有9,422顆星
說明：?“用于開發(fā)快速而強(qiáng)大的Web界面的輕量級和模塊化的前端框架”。
核心概念/原則：?RWD缚够，移動端優(yōu)先
框架大嗅７痢：?326.9 KB（如果包含uikit-icons.min.js與SVG圖標(biāo)相關(guān)的功能，則為384.4?KB?）
預(yù)處理器：少谍椅，Sass
響應(yīng)式布局：是
模塊化：是
啟動模板/布局：是
圖標(biāo)集：?UIkit自帶SVG圖標(biāo)系統(tǒng)和類庫误堡，其中包含越來越多的大綱圖標(biāo)。
額外/附加組件：是
獨特的組件：Article, Flex, Cover, HTML Editor
文件：好
自定義：高級GUI定制程序僅在版本2（以前的版本）中可用
瀏覽器支持：?Chrome雏吭，F(xiàn)irefox锁施，Safari，IE9 +
許可證：MIT
UIkit說明
UIkit成功應(yīng)用在許多WordPress主題中思恐。它提供了靈活和強(qiáng)大的手動定制機(jī)制（以前版本的框架還提供了高級GUI定制程序）沾谜。
什么是最適合你的框架？
在選擇框架時胀莹，可以從以下幾個方面考慮：
所選的框架有足夠的人氣嗎？更多的人氣意味著更多的人參與項目婚温，也意味著有更多的教程和社區(qū)文章描焰、更多的實例和網(wǎng)站、更多的第三方擴(kuò)展栅螟、更好的相關(guān)的Web產(chǎn)品可與其集成荆秦。受歡迎程度也意味著框架更具前瞻性，因為具有更大社區(qū)的框架不太可能被拋棄力图。
框架是否正在積極發(fā)展步绸？一個好的框架需要不斷地使用最新的web技術(shù)，特別是在移動端方面吃媒。
框架是否達(dá)到成熟瓤介？如果一個特定的框架在現(xiàn)實項目中還沒有被使用和測試，那么將其用于你的專業(yè)項目赘那，可能不是一個明智的選擇刑桑。
框架是否提供了良好的文檔？為了方便學(xué)習(xí)過程募舟，總是需要良好的文檔祠斧。
框架的特異性是什么？這里的要點是拱礁，與具有高級別特異性的框架相比琢锋，更通用的框架更容易使用辕漂。在大多數(shù)情況下，最好選擇一個應(yīng)用最小樣式的框架吴超，因為它更容易自定義钮热。與重寫現(xiàn)有的CSS規(guī)則相比，添加新的CSS規(guī)則是一個更方便有效的做法烛芬。
如果你還不確定使用哪個框架隧期，那么可以采用混合搭配的方式。當(dāng)某個特定的框架不能滿足你的需求時赘娄，可以混合使用兩個或多個項目的組件仆潮。
最后值得一提的是，現(xiàn)在Flexbox和Grid Layout在主流瀏覽器的最新版本中得到很好的支持遣臼，比以往任何時候都更容易構(gòu)建復(fù)雜的布局性置。這可能會鼓勵更多的開發(fā)人員放棄前端框架，從頭開始編寫他們自己想要的布局揍堰。
原文鏈接：https://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/
轉(zhuǎn)載請注明出自：葡萄城控件
關(guān)于葡萄城
葡萄城是全球控件行業(yè)領(lǐng)導(dǎo)者鹏浅，世界領(lǐng)先的企業(yè)應(yīng)用定制工具、企業(yè)報表和商業(yè)智能解決方案提供商屏歹，為超過75%的全球財富500強(qiáng)企業(yè)提供服務(wù)隐砸。
