現如今快要被(bèi)各種(zhǒng)各樣(yàng)的 CSS 前端框架給淹沒(méi)了，真做的不錯的其實也就那麼(me)幾個。本文將(jiāng)對(duì)比五個我認爲是現在最好(hǎo)的框架。這(zhè)些框架每一個都(dōu)有自己的優缺點和适用的應用類型， 你需要根據自己的需要來選擇不同的框架。
 

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。

例如，如果你的項目簡單，就不需要使用一個複雜的框架。又或者，很多框架都(dōu)是模塊化的，你可以隻是用你需要的模塊，或者把不同框架的模塊混到一起(qǐ)使用。

我將(jiāng)要介紹的這(zhè)些框架的順序與它們在 GitHub 的流行程度有關。自然，就是從最流行的 Bootstrap 說起(qǐ)。

提示：在接下的幾周或者幾個月内，下面(miàn)的一些信息很可能(néng)會過(guò)時。比如 GitHub 上的 star 數、版本号等等。如果你在文章發(fā)布很久之後(hòu)來讀本文的話，一定别忘了這(zhè)一點。還(hái)

有，下面(miàn)這(zhè)些框架的大小指的是經(jīng)過(guò)壓縮的必要的 CSS 和 JavaScript 文件大小。

Bootstrap 無疑地是目前這(zhè)些類庫的領跑者。它非常流行，流行程度還(hái)在一天天的增加。這(zhè) 個令人贊歎的工具集不會讓你失望的，在你構建成(chéng)功站點之路上少不了它。

作者：Mark Otto 和 Jacob Thornton

發(fā)布時間：2011年

最新版本：3.3.

流行程度：GitHub 上 75,000+ 的 star

介紹：“Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，可用來開(kāi)響應式的移動有限的 Web 項目。”

核心理念/原則：響應式與移動優先

框架大小：145 KB

預處理器：Less 和 Sass

響應式：是

模塊化：是

上手模塊/布局：是

字體圖标：大半 Glyphicon 圖标

插件/擴展： 無，不過(guò)有大量的第三方插件

特色組件： 超大屏設計

文檔： 完善

自定義： 基礎的 GUI 自定義；不過(guò)你需要手動輸入顔色值，因爲不支持顔色選擇器

浏覽器支持： Firefox、Chrome、Safari、IE8+ （IE8 的話需要使用 Respond.js）

開(kāi)源協議： MIT

Bootstrap 使用心得

Bootstrap 最大的優勢就是它非常流行。從技術上講，它并不是比其他在列框架要優秀。隻是它有很多資源（文章、教程、第三方插件和擴展以及主題構造器等等），比起(qǐ)其他四

個框架合到一起(qǐ)還(hái)要多。簡單地講，Bootstrap 就是無處不在。這(zhè)也是大家繼續使用它的原因。

提示:當我說“特色”的組件，這(zhè)種(zhǒng)特色就是針對(duì)目前列出的這(zhè)些框架而言的。

Foundation 是這(zhè)個領域的第二大玩家。擁有像 ZURB 這(zhè)樣(yàng)的公司在背後(hòu)支持，不得不說它确實有一個非常堅實的基礎。總之，Foundation 被(bèi)很多大的網站采用。包括 Facebook、

Mozilla、Ebay、Yahoo 以及 National Geographic 等等。

作者： ZURB

發(fā)布時間： 2011

最新版本： 5.4.7

流行程度： GitHub 上 18,000+ 的 star

介紹： “世界上最先進(jìn)的響應式前端框架”

核心理念/原則： 響應式、移動優先、語義化

框架大小： 326 KB

預處理器： Sass

響應式： 是

模塊化： 是

上手模塊/布局： 是

字體圖标： Foundation 字體圖标

插件/擴展： 有

特色組件： Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables

文檔： 完善，還(hái)有很多其他資源

自定義： 無 GUI 的自定義工具，需要自己手動修改

浏覽器支持： Chrome、Firefox、Safari、IE9+；iOS、Android、Windows Phone 7+

開(kāi)源協議： MIT

Foundation 使用心得

Foundation 的确是一個非常專業的框架，有商業的支持、培訓以及外包。它同時還(hái)提供很多資源，幫助你更加快速更加容易地學(xué)習和使用這(zhè)個框架。

Semantic UI 一直在努力讓網站建設更加語義化。它利用了自然語言的原則，使得代碼更容易讀更容易理解。

作者：Jack Lukic

發(fā)布時間： 2013

最新版本： 1.2.0

流行程度： GitHub 上 12,900+ 的 star

介紹：“一個 UI 模塊框架，基于來自自然語言的一些有用的原則。”

核心理念/原則： 語義化、tag ambivalence、響應式

框架大小： 552 KB

預處理器： Less

響應式： 是

模塊化： 是

上手模塊/布局： 無

字體圖标： Font Awesome

插件/擴展： 無

特色組件： Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、DimmerRating、Shape

文檔： 非常好(hǎo)。Semantic 有組織良好(hǎo)的文檔，外加一個單獨網站提供指南，幫助用戶快速上手，自定義和創建主題。

自定義： 無 GUI 的自定義工具，需手動修改

浏覽器支持： Firefox、Chrome、Safari、IE10+ (IE9需要prefix支持)、Android 4、Blackberry 10

開(kāi)源協議： MIT

Semantic UI 使用心得

在這(zhè)些框架中，Semantic 是最具革命性特性最全的框架。爲了讓樣(yàng)式邏輯清晰，語義化，整個框架的結構以及命名約定都(dōu)要優于其他框架。

Pure 是一個輕量的、模塊化的框架——使用純 CSS 編寫的——根據你的需要，可以組合或者分開(kāi)使用 Pure 的模塊。

作者： Yahoo

發(fā)布時間： 2013

當前版本： 0.5.0

流行程度： GitHub 上 9,900+ 的 star

介紹： “一系列小的，響應式的 CSS 模塊，可以用在你的每一個項目中。”

核心理念/原則： SMACSS、極簡主義

框架大小： 18 KB

預處理器： 無

響應式： 是

模塊化： 是

上手模塊/布局： 有

字體圖标： 無，你可以使用 Font Awesome

插件/擴展： 無

特色組件： 無

文檔： 好(hǎo)

自定義： 基礎的 GUI 皮膚構造工具

浏覽器支持： 最新的Firefox、Chrome、Safari； IE7+、iOS 6.x、7.x；Android 4.x

開(kāi)原協議： Yahoo! Inc. BSD

Pure 使用心得

Pure 隻提供一套極簡的樣(yàng)式，便于你從零開(kāi)始你的項目。對(duì)于那些不需要一個全棧框架，隻需要某些組件的加入到他們自己的項目中的用戶來講，這(zhè)個框架非常符合。

UIkit 包含了一些列簡潔的易用的便于自定義的組件。盡管它沒(méi)有其他在列的框架流行，但是它提供了相當的功能(néng)和質量。

作者： YOOtheme

發(fā)布時間： 2013

當前版本： 2.13.1

流行程度： GitHub 上 3,800+ 的 star

介紹： “輕量的，模塊化的前端框架，可用來快速構建強大的網頁界面(miàn)”

核心理念/原則： 響應式、移動優先

框架大小： 118 KB

預處理器： Less、Sass

響應式： 是

模塊化： 是

上手模塊/布局： 是

字體圖标： Font Awesome

插件/擴展： 有

特色組件： Article、Flex、Cover、HTML Editor

文檔： 好(hǎo)

自定義： 高級的 GUI 自定義工具

浏覽器支持： Chrome, Firefox, Safari, IE9+

開(kāi)原協議： MIT

UIkit 使用心得

UIkit 在WordPress 主題中很成(chéng)功。它提供了強大靈活的自定義機制，可以手動修改或者使用它的提供的 GUI 自定義工具來實現。

如何選擇框架？

最後(hòu)，我來給一些選擇框架的建議。下面(miàn)是一些選擇框架需要注重的點:

這(zhè)個框架足夠流行嗎？流行意味著(zhe)有更多的人參與到項目中來，因此，社區中有更多的文章和教程，現實中更多的示例和網站，會有更多的第三方擴展，當然能(néng)夠更好(hǎo)地與現實的

web開(kāi)發(fā)項目結合。極其流行意味著(zhe)這(zhè)個框架經(jīng)得住未來的考驗；

擁有龐大社區的框架最不可能(néng)被(bèi)抛棄；

框架是否還(hái)在活躍地開(kāi)發(fā)中？一個優秀的框架需要不斷地提升自己，緊跟最新 Web 技術的

發(fā)展，尤其對(duì)于移動來說；

這(zhè)個框架是否已經(jīng)成(chéng)熟？如果某個框架還(hái)沒(méi)有在真實項目中充分地使用和測試，隻可能(néng)試著(zhe)玩玩，如果用到專業的項目中的話并不是一個明智的選擇；

框架是否有完善的文檔？最後(hòu)好(hǎo)能(néng)有完善的文檔，這(zhè)樣(yàng)可以加快學(xué)習的進(jìn)程；

框架的詳細程度如何？這(zhè)裡(lǐ)核心的點在于一個更通用的框架更容易使用，比較于那些詳細程度很高的框架而言。在很多情況下，最好(hǎo)的就是選擇一個有最少樣(yàng)式的框架，因爲這(zhè)樣(yàng)

的話比較容易自定義。添加新的 CSS 規則要比比對(duì)複寫現有的樣(yàng)式規則方便多了。而且，如果你在已有的樣(yàng)式上添加新的樣(yàng)式，你最終獲得的就是無用的樣(yàng)式規則，這(zhè)將(jiāng)會增加

CSS 文件的大小。
最後(hòu)，如果你還(hái)是不确定，你可以采用一種(zhǒng)混合搭配的方式。如果某個框架無法滿足你的需求，你可以混用一些來自其他框架來的組件。例如，你可以使用某個框架的精簡的 CSS

基礎樣(yàng)式，使用來自另外一個框架的栅格系統，以及從第三個框架更爲複雜的模塊。模塊化萬歲！:)

你怎麼(me)看的？這(zhè)些框架還(hái)有哪些策略或者弱點在這(zhè)裡(lǐ)沒(méi)有提到的？還(hái)有哪些框架你覺得應該列舉在這(zhè)裡(lǐ)？你可以在下面(miàn)回複給我們。