Ba la la la ~ 讀者朋友們肿男，你們好啊，又到了冷鋒時(shí)間巡雨，話不多說，發(fā)車婉支！

1.Bootstrap

Bootstrap是目前可用框架中無可爭(zhēng)議的領(lǐng)導(dǎo)者鸯隅。其人氣日益增長(zhǎng)，你可以放心的選擇這個(gè)框架向挖，而不必?fù)?dān)心項(xiàng)目會(huì)失敗蝌以，因?yàn)榫哂袕V泛使用基礎(chǔ)的框架，不太可能被拋棄何之。

Bootstrap說明

Bootstrap的廣泛流行是它的優(yōu)勢(shì)所在跟畅。在技術(shù)上，它不一定比列表中的其它框架更好溶推，但它提供了比其它四個(gè)框架更多的資源（文章和教程徊件、第三方插件和擴(kuò)展、主題構(gòu)建器等）蒜危。簡(jiǎn)而言之虱痕，Bootstrap 無處不在，這是人們繼續(xù)選擇的主要原因辐赞。

創(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)式响委、移動(dòng)的Web項(xiàng)目新思。
核心概念/原則： RWD和移動(dòng)端優(yōu)先。
框架大凶阜纭： 154 KB
預(yù)處理器： Less和Sass
響應(yīng)式布局：是
模塊化：是
啟動(dòng)模板/布局：是
圖標(biāo)集： Glyphicons Halflings設(shè)置
附加/附件：無捆綁夹囚，許多第三方插件可用。
獨(dú)特組件： Jumbotron
文檔資源：良好
自定制：基本GUI定制器邀窃。但是你需要手動(dòng)輸入顏色值荸哟，因?yàn)闆]有顏色選擇器可用。
瀏覽器支持： Firefox瞬捕，Chrome敲茄，Safari，IE8 +（您需要IE8的Respond.js）
許可證： MIT

2.Foundation

Foundation是排在第二名的框架山析。ZURB這樣堅(jiān)實(shí)的公司一直支持著Foundation堰燎，所以這個(gè)框架有強(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钾挟，移動(dòng)端優(yōu)先洁灵，語義。
框架大小： 197.5 KB
預(yù)處理器： Sass
響應(yīng)式布局：是
模塊化：是
啟動(dòng)模板/布局：是
圖標(biāo)集： 基礎(chǔ)圖標(biāo)字體
額外/附加組件：是
獨(dú)特的組件： 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是一個(gè)真正的專業(yè)框架慎菲，提供業(yè)務(wù)支持嫁蛇、培訓(xùn)和咨詢。它還提供了許多資源來幫助你更快更輕松地學(xué)習(xí)和使用該框架露该。

3.Semantic UI

Semantic UI是一個(gè)語義化設(shè)計(jì)的前端開源框架睬棚。它利用自然語言原理，從而使代碼更加可讀和可理解有决。

創(chuàng)作者： Jack Lukic
發(fā)行： 2013
當(dāng)前版本： 2.2

人氣： GitHub上有34,762顆星
說明： “基于自然語言原則的UI組件框架”闸拿。
核心概念/原則：Semantic, tag ambivalence, responsive。
框架大惺槟弧： 806 KB
預(yù)處理器：少
響應(yīng)式布局：是
模塊化：是
啟動(dòng)模板/布局：是新荤，并提供了一些基本的入門模板
圖標(biāo)集： Font Awesome
額外/附加組件：否
獨(dú)特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。
文檔資源：非常好台汇，Semantic提供了一個(gè)非常有組織的文檔苛骨，另外還有一個(gè)單獨(dú)的網(wǎng)站提供入門指南、自定義和創(chuàng)建主題苟呐。
自定義：沒有GUI定制器痒芝，只有手動(dòng)定制。
瀏覽器支持： Firefox牵素，Chrome严衬，Safari，IE10 +（僅IE9瀏覽器前綴）笆呆，Android 4请琳，Blackberry 10
許可證：MIT

Semantic UI說明

Semantic是這里所討論的所有框架中，最具創(chuàng)新性和全功能的框架赠幕。其框架的總體結(jié)構(gòu)俄精、類中清晰邏輯的命名約定方式和語義方面也超過了其它框架。

4.Pure

Pure是一種輕量級(jí)的模塊化框架榕堰，采用純CSS編寫竖慧，具有可根據(jù)需要一起使用或單獨(dú)使用的組件。

創(chuàng)作者：雅虎
發(fā)行： 2013
當(dāng)前版本： 0.6.2

流行度： GitHub上有16,637顆星
說明： “一套小而靈活的CSS模塊，能夠在每個(gè)Web項(xiàng)目中使用圾旨□馓郑”
核心概念/原則： SMACSS，極簡(jiǎn)主義碳胳。
框架大杏买： 16 KB
預(yù)處理：無
響應(yīng)式布局：是
模塊化：是
啟動(dòng)模板/布局：是
圖標(biāo)集：無沫勿“ぴ迹可以改用Font Awesome。
額外/附加組件：無
獨(dú)特組件：無
文檔資源：很好
自定義：基本GUI皮膚生成器
瀏覽器支持：最新版本的Firefox产雹，Chrome诫惭，Safari; IE7 +; iOS 6.x，7.x; Android 4.x
許可證： Yahoo! Inc. BSD

Pure說明

Pure為你的項(xiàng)目提供了一個(gè)干凈的開始蔓挖，只提供基本框架夕土。對(duì)于不需要全功能框架但僅包含在其工作中的特定組件的人來說，pures是一個(gè)理想的選擇瘟判。

5.UIkit

UIkit是一個(gè)易于使用和自定義的組件的簡(jiǎn)潔集合怨绣。雖然它不像其它框架那樣受歡迎，但它提供了相同的功能和質(zhì)量拷获。

創(chuàng)造者： YOOtheme
發(fā)行： 2013
當(dāng)前版本： 3.0.0
人氣：GitHub GitHub上有9,422顆星
說明： “用于開發(fā)快速而強(qiáng)大的Web界面的輕量級(jí)和模塊化的前端框架”篮撑。
核心概念/原則： RWD，移動(dòng)端優(yōu)先
框架大写夜稀： 326.9 KB（如果包含uikit-icons.min.js與SVG圖標(biāo)相關(guān)的功能赢笨，則為384.4 KB ）
預(yù)處理器：少，Sass
響應(yīng)式布局：是
模塊化：是
啟動(dòng)模板/布局：是
圖標(biāo)集： UIkit自帶SVG圖標(biāo)系統(tǒng)和類庫驮吱，其中包含越來越多的大綱圖標(biāo)茧妒。
額外/附加組件：是
獨(dú)特的組件：Article, Flex, Cover, HTML Editor
文件：好
自定義：高級(jí)GUI定制程序僅在版本2（以前的版本）中可用
瀏覽器支持： Chrome，F(xiàn)irefox左冬，Safari桐筏，IE9 +
許可證：MIT

UIkit說明

UIkit成功應(yīng)用在許多WordPress主題中。它提供了靈活和強(qiáng)大的手動(dòng)定制機(jī)制（以前版本的框架還提供了高級(jí)GUI定制程序）拇砰。

什么是最適合你的框架梅忌？

在選擇框架時(shí)，可以從以下幾個(gè)方面考慮：

所選的框架有足夠的人氣嗎毕匀？更多的人氣意味著更多的人參與項(xiàng)目铸鹰，也意味著有更多的教程和社區(qū)文章、更多的實(shí)例和網(wǎng)站皂岔、更多的第三方擴(kuò)展蹋笼、更好的相關(guān)的Web產(chǎn)品可與其集成。受歡迎程度也意味著框架更具前瞻性，因?yàn)榫哂懈笊鐓^(qū)的框架不太可能被拋棄剖毯。
框架是否正在積極發(fā)展圾笨？一個(gè)好的框架需要不斷地使用最新的web技術(shù)，特別是在移動(dòng)端方面逊谋。

框架是否達(dá)到成熟擂达？如果一個(gè)特定的框架在現(xiàn)實(shí)項(xiàng)目中還沒有被使用和測(cè)試，那么將其用于你的專業(yè)項(xiàng)目胶滋，可能不是一個(gè)明智的選擇板鬓。

框架是否提供了良好的文檔？為了方便學(xué)習(xí)過程究恤，總是需要良好的文檔俭令。

框架的特異性是什么？這里的要點(diǎn)是部宿，與具有高級(jí)別特異性的框架相比抄腔，更通用的框架更容易使用。在大多數(shù)情況下理张，最好選擇一個(gè)應(yīng)用最小樣式的框架赫蛇，因?yàn)樗菀鬃远x。與重寫現(xiàn)有的CSS規(guī)則相比雾叭，添加新的CSS規(guī)則是一個(gè)更方便有效的做法悟耘。

如果你還不確定使用哪個(gè)框架，那么可以采用混合搭配的方式拷况。當(dāng)某個(gè)特定的框架不能滿足你的需求時(shí)作煌，可以混合使用兩個(gè)或多個(gè)項(xiàng)目的組件。

最后值得一提的是赚瘦，現(xiàn)在Flexbox和Grid Layout在主流瀏覽器的最新版本中得到很好的支持粟誓，比以往任何時(shí)候都更容易構(gòu)建復(fù)雜的布局。這可能會(huì)鼓勵(lì)更多的開發(fā)人員放棄前端框架起意，從頭開始編寫他們自己想要的布局鹰服。

以上為個(gè)人意見，如有雷同揽咕，純屬巧合悲酷，歡迎大家多提意見！Bey 了 個(gè) Bey ~