web前端開發並不難,但是要想做得優雅的前端並不容易,而前端框架模組規範化的開發提高了效率，前端框架的出現讓前端開發更為便捷、簡單、快速。隨著jQuery及css3的發展，以Bootstrap 為代表的前端開發框架如雨後春筍般擠入視野，本文將會選擇比較優秀的五個最佳框架。每個前端框架都有自己的優點和缺點，以及具體的應用領域，你可以根據自己的具體專案需求進行選擇。此外，許多選項都是模組化的，允許你僅使用所需的元件，甚至可以混合使用來自不同框架的元件。

本文依據各個框架的GitHub流行度來順序介紹。

一.Bootstrap
前端框架Bootstrap
Bootstrap是目前可用框架中無可爭議的領導者。其人氣日益增長，你可以放心的選擇這個框架，而不必擔心專案會失敗，因為具有廣泛使用基礎的框架，不太可能被拋棄。

說明： “Bootstrap是最流行的HTML，CSS和JavaScript框架，用於在網路上開發響應式、移動的Web專案。

前處理器： Less和Sass

響應式佈局：是

模組化：是

啟動模板/佈局：是

圖示集： Glyphicons Halflings設定

附加/附件：無捆綁，許多第三方外掛可用。

獨特元件： Jumbotron

文件資源：良好

自定製：基本GUI定製器。但是你需要手動輸入顏色值，因為沒有顏色選擇器可用。

瀏覽器支援： Firefox，Chrome，Safari，IE8 +(您需要IE8的Respond.js)

Bootstrap說明

Bootstrap的廣泛流行是它的優勢所在。在技術上，它不一定比列表中的其它框架更好，但它提供了比其它四個框架更多的資源(文章和教程、第三方外掛和擴充套件、主題構建器等)。簡而言之，Bootstrap 無處不在，這是人們繼續選擇的主要原因。

二.Semantic UI

Semantic UI是一個語義化設計的前端開源框架。它利用自然語言原理，從而使程式碼更加可讀和可理解。
Semantic UI

說明： “基於自然語言原則的UI元件框架”。

核心概念/原則：Semantic, tag ambivalence, responsive。

框架大小： 806 KB

前處理器：少

響應式佈局：是

模組化：是

啟動模板/佈局：是，並提供了一些基本的入門模板

圖示集： Font Awesome

額外/附加元件：否

獨特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。

文件資源：非常好，Semantic提供了一個非常有組織的文件，另外還有一個單獨的網站提供入門指南、自定義和建立主題。

自定義：沒有GUI定製器，只有手動定製。

瀏覽器支援： Firefox，Chrome，Safari，IE10 +(僅IE9瀏覽器字首)，Android 4，Blackberry 10

Semantic UI說明

Semantic是這裡所討論的所有框架中，最具創新性和全功能的框架。其框架的總體結構、類中清晰邏輯的命名約定方式和語義方面也超過了其它框架。

三.Pure
Pure是一種輕量級的模組化框架，採用純CSS編寫，具有可根據需要一起使用或單獨使用的元件。
Pure
創作者：雅虎

發行： 2013

當前版本： 0.6.2

流行度： GitHub上有16,637顆星

說明： “一套小而靈活的CSS模組，能夠在每個Web專案中使用。”

核心概念/原則： SMACSS，極簡主義。

預處理：無

響應式佈局：是

模組化：是

啟動模板/佈局：是

圖示集：無。可以改用Font Awesome。

額外/附加元件：無

獨特元件：無

文件資源：很好

自定義：基本GUI面板生成器

瀏覽器支援：最新版本的Firefox，Chrome，Safari; IE7 +; iOS 6.x，7.x; Android 4.x

許可證： Yahoo! Inc. BSD

Pure說明

Pure為你的專案提供了一個乾淨的開始，只提供基本框架。對於不需要全功能框架但僅包含在其工作中的特定元件的人來說，pures是一個理想的選擇。

四.Foundation

Foundation是排在第二名的框架。ZURB這樣堅實的公司一直支援著Foundation，所以這個框架有強大的基礎。Foundation現已用於許多大型網站，包括Facebook，Mozilla，Ebay，Yahoo!和國家地理等。
Foundation

說明： “世界上最先進的響應式前端框架”

核心概念/原則： RWD，移動端優先，語義。

前處理器： Sass

響應式佈局：是

模組化：是

啟動模板/佈局：是

圖示集： 基礎圖示字型

額外/附加元件：是

獨特的元件： Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

文件資源：良好，還有許多額外資源。

自定製：基本的GUI定製程式，類似於Bootstrap定製工具。

瀏覽器支援： Chrome，Firefox，Safari，IE9 +; iOS，Android，Windows Phone 7+

許可證：MIT

Foundation說明

Foundation是一個真正的專業框架，提供業務支援、培訓和諮詢。它還提供了許多資源來幫助你更快更輕鬆地學習和使用該框架。

五.UIkit

UIkit是一個易於使用和自定義的元件的簡潔集合。雖然它不像其它框架那樣受歡迎，但它提供了相同的功能和質量。
UIkit
由 YOOtheme創造，發行於2013年

說明： “用於開發快速而強大的Web介面的輕量級和模組化的前端框架”。

核心概念/原則： RWD，移動端優先

前處理器：少，Sass

響應式佈局：是

模組化：是

啟動模板/佈局：是

圖示集： UIkit自帶SVG圖示系統和類庫，其中包含越來越多的大綱圖示。

額外/附加元件：是

獨特的元件：Article, Flex, Cover, HTML Editor

檔案：好

自定義：高階GUI定製程式僅在版本2(以前的版本)中可用

瀏覽器支援： Chrome，Firefox，Safari，IE9 +

許可證：MIT

UIkit說明

UIkit成功應用在許多WordPress主題中。它提供了靈活和強大的手動定製機制(以前版本的框架還提供了高階GUI定製程式)。

什麼是最適合你的框架?

在選擇框架時，可以從以下幾個方面考慮：

所選的框架有足夠的人氣嗎?更多的人氣意味著更多的人蔘與專案，也意味著有更多的教程和社群文章、更多的例項和網站、更多的第三方擴充套件、更好的相關的Web產品可與其整合。受歡迎程度也意味著框架更具前瞻性，因為具有更大社群的框架不太可能被拋棄。

框架是否正在積極發展?一個好的框架需要不斷地使用最新的web前端開發技術，特別是在移動端方面。

本文轉載於https://www.itdongshi.com/show/255.html