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

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

我選擇的這些框架是根據(jù)它們在 Github 的受歡迎程度來的，而最受歡迎的毫無疑問是 Bootstrap。

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

1. Bootstrap

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

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

Bootstrap 注意事項

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

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

2. Foundation (來自 ZURB）

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

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

Foundation 備注

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

3. Semantic UI

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

• 作者:
• 發(fā)布時間: 2013
• 當(dāng)前版本: 2.2
• 受歡迎程度: 在 Github 上獲得 34,762 個贊
• 項目描述: “一個 UI 組件框架，基于自然語言特點”
• 核心概念: 語義、標(biāo)簽、響應(yīng)式
• 框架提及: 806 KB
• 預(yù)處理器: Less
• 響應(yīng)式: Yes
• 模塊化: Yes
• 模板布局: 支持，提供一些基礎(chǔ)模板
• 圖標(biāo)集: Font Awesome
• 擴(kuò)展、插件: No
• 獨特組件: 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 注意事項

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

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

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

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