如今的 CSS 前端框架的發(fā)展非常迅猛，但是真正好的框架不多。

本文將對(duì)當(dāng)今最好的 5 個(gè)框架進(jìn)行比較。每個(gè)框架都有它自己的強(qiáng)項(xiàng)和弱項(xiàng)，以及適合的領(lǐng)域，你需要根據(jù)這些特點(diǎn)來(lái)進(jìn)行選擇。例如，如果你的項(xiàng)目很簡(jiǎn)單，那就沒有必要選擇復(fù)雜的框架。此外，還有一些選項(xiàng)是模塊化，這樣你就可以根據(jù)需要選擇所需的組件，或者來(lái)自不同框架混合的組件。

我選擇的這些框架是根據(jù)它們?cè)?Github 的受歡迎程度來(lái)的，而最受歡迎的毫無(wú)疑問(wèn)是 Bootstrap。

(注意：文章中的一些數(shù)據(jù)日新月異，例如 Github 上點(diǎn)贊數(shù)、版本號(hào)等等。當(dāng)你閱讀這篇文章應(yīng)該意識(shí)到這些問(wèn)題)

1. Bootstrap

 毫無(wú)爭(zhēng)議是今天最領(lǐng)先的前端框架。鑒于其超級(jí)強(qiáng)大的人氣，而且每天都還在不斷增長(zhǎng)，你可以這個(gè)框架是非常棒的，不會(huì)讓你失望。

• 作者: and .
• 發(fā)布時(shí)間: 2011
• 當(dāng)前版本: 3.3.7
• 普及程序: 在 Github 上獲得 111,000 個(gè)點(diǎn)贊
• 描述: “Bootstrap 是最受歡迎的 HTML、CSS 和 JavaScript 框架，用于開發(fā)響應(yīng)式、移動(dòng)優(yōu)先的 Web 應(yīng)用”
• 核心概念: 以及移動(dòng)優(yōu)先
• 框架體積: 154 KB
• 預(yù)處理器: and
• 響應(yīng)式: Yes
• 模塊化: Yes
• 支持模板和布局？: Yes
• 圖標(biāo)集: Halflings set
• 插件/擴(kuò)展: 沒有綁定，但是很多第三方的可以選擇
• 獨(dú)特的組件: Jumbotron
• 文檔: Good
• 定制: 基本的 GUI 定制工具，不行的是你需要手工輸入顏色值，因?yàn)闆]有提供顏色拾取器
• 瀏覽器支持: Firefox, Chrome, Safari, IE8+ (IE 8 需要  )
• 許可證:

Bootstrap 注意事項(xiàng)

Bootstrap 最大的優(yōu)勢(shì)是其普及的程度。技術(shù)上來(lái)說(shuō)，它不一定比這個(gè)列表上的其他框架更好，但是它比其他框架提供了更多的資源（包括文章、教程、第三方插件和擴(kuò)展，主題構(gòu)建等等）。簡(jiǎn)單來(lái)說(shuō)，Bootstrap 使用廣泛，這是人們繼續(xù)選擇它的主要原因。

(注意: 這里的 “獨(dú)特組件” 的意思是與其他框架比較的) 

2. Foundation (來(lái)自 ZURB）

在這份列表中是第二大選擇。有了一個(gè)堅(jiān)實(shí)的公司 做背書，該框架有一個(gè)真正強(qiáng)大、而且很棒的基礎(chǔ)。此外，有很多大網(wǎng)站在使用該框架，包括：Facebook, Mozilla, Ebay, Yahoo! 以及國(guó)家地理雜志等等。

• 所屬: ZURB
• 發(fā)布時(shí)間: 2011
• 當(dāng)前時(shí)間:6.3.1
• 受歡迎程度: 在 Github 收獲 25,400 個(gè)點(diǎn)贊
• 描述: “最高級(jí)的響應(yīng)式前端框架”
• 核心概念: RWD, 移動(dòng)優(yōu)先，語(yǔ)義化
• 框架體積: 197.5 KB
• 預(yù)處理器: Sass
• 響應(yīng)式: Yes
• 模塊化: Yes
• 模板/布局: Yes
• 圖標(biāo)集:
• 插件/擴(kuò)展: Yes
• 獨(dú)特組件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• 文檔: 好，提供很多額外資源
• 定制: 基本的 GUI 定制器，類似 Bootstrap 那款
• 瀏覽器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• 許可證: MIT

Foundation 備注

Foundation 是一個(gè)真正專業(yè)的框架，提供商業(yè)支持和咨詢服務(wù)。同時(shí)提供很多資源去幫你快速輕松的學(xué)習(xí)和使用該框架。

3. Semantic UI

 一直在持續(xù)發(fā)展，構(gòu)建更具語(yǔ)義的 Web 網(wǎng)站。其利用自然語(yǔ)言原則，使得代碼更加具備可讀性和易于理解。

• 作者:
• 發(fā)布時(shí)間: 2013
• 當(dāng)前版本: 2.2
• 受歡迎程度: 在 Github 上獲得 34,762 個(gè)贊
• 項(xiàng)目描述: “一個(gè) UI 組件框架，基于自然語(yǔ)言特點(diǎn)”
• 核心概念: 語(yǔ)義、標(biāo)簽、響應(yīng)式
• 框架提及: 806 KB
• 預(yù)處理器: Less
• 響應(yīng)式: Yes
• 模塊化: Yes
• 模板布局: 支持，提供一些基礎(chǔ)模板
• 圖標(biāo)集: Font Awesome
• 擴(kuò)展、插件: No
• 獨(dú)特組件: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
• 文檔: 非常棒，組織良好，提供入門、定制和主題創(chuàng)建.
• 定制: 不提供 GUI 定制器，只有手工定制
• 瀏覽器支持: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
• 許可證: MIT

Semantic UI 注意事項(xiàng)

Semantic 是最具創(chuàng)新以及全功能的框架。框架的整體結(jié)構(gòu)和命名都有明確的邏輯和語(yǔ)義，在這方面碾壓其他框架。

如果你還是無(wú)法選擇，你可以使用混搭的方法。如果一個(gè)框架無(wú)法完全滿足你的需求，你可以從兩個(gè)或者更多的框架中選擇你所需要的組件。例如，你可以用一個(gè)框架中的基本 CSS 樣式，然后用另外一個(gè)框架中表格系統(tǒng)等等。這要感謝模塊化的設(shè)計(jì) —— 模塊化萬(wàn)歲！

最后還需要提到的是，由于在主流的瀏覽器中對(duì) Flexbox 和表格布局都有很好的支持，所以現(xiàn)在構(gòu)建復(fù)雜的布局已經(jīng)變得非常容易。這個(gè)也不斷的在鼓勵(lì)更多的開發(fā)者拋棄前端框架，從頭開發(fā)自己的框架。

如果你有其他的想法，請(qǐng)別忘了在評(píng)論中發(fā)表你的意見哦~