Bootstrap

• 創作者： 和 .
• 發行： 2011
• 當前版本： 3.3.7
• 人氣： GitHub上有111,000顆星
• 說明： “Bootstrap是最流行的HTML，CSS和JavaScript框架，用于在網絡上開發響應式、移動的Web項目。
• 核心概念/原則： 和移動端優先。
• 框架大小： 154 KB
• 預處理器： 和
• 響應式布局：是
• 模塊化：是
• 啟動模板/布局：是
• 圖標集： Halflings設置
• 附加/附件：無捆綁，許多第三方插件可用。
• 獨特組件： Jumbotron
• 文檔資源：良好
• 自定制：基本GUI定制器。但是你需要手動輸入顏色值，因為沒有顏色選擇器可用。
• 瀏覽器支持： Firefox，Chrome，Safari，IE8 +（您需要IE8的）
• 許可證：
   

Bootstrap說明

Foundation

• 創作者： ZURB
• 發行： 2011
• 當前版本： 6.3.1
• 人氣： GitHub上有25,400顆星
• 說明： “世界上最先進的響應式前端框架”
• 核心概念/原則： RWD，移動端優先，語義。
• 框架大小： 197.5 KB
• 預處理器： Sass
• 響應式布局：是
• 模塊化：是
• 啟動模板/布局：是
• 圖標集：
• 額外/附加組件：是
• 獨特的組件： Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• 文檔資源：良好，還有許多額外資源。
• 自定制：基本的GUI定制程序，類似于Bootstrap定制工具。
• 瀏覽器支持： Chrome，Firefox，Safari，IE9 +; iOS，Android，Windows Phone 7+
• 許可證：MIT
   

Foundation說明

Semantic UI

• 創作者：
• 發行： 2013
• 當前版本： 2.2
• 人氣： GitHub上有34,762顆星
• 說明： “基于自然語言原則的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
• 許可證：MIT
   

Semantic UI說明

Pure

• 創作者：雅虎
• 發行： 2013
• 當前版本： 0.6.2
• 流行度： GitHub上有16,637顆星
• 說明： “一套小而靈活的CSS模塊，能夠在每個Web項目中使用。”
• 核心概念/原則： ，極簡主義。
• 框架大小： 16 KB
• 預處理：無
• 響應式布局：是
• 模塊化：是
• 啟動模板/布局：是
• 圖標集：無。可以改用Font Awesome。
• 額外/附加組件：無
• 獨特組件：無
• 文檔資源：很好
• 自定義：基本GUI皮膚生成器
• 瀏覽器支持：最新版本的Firefox，Chrome，Safari; IE7 +; iOS 6.x，7.x; Android 4.x
• 許可證：
   

Pure說明

UIkit

• 創造者：
• 發行： 2013
• 當前版本： 3.0.0
• 人氣：GitHub GitHub上有9,422顆星
• 說明： “用于開發快速而強大的Web界面的輕量級和模塊化的前端框架”。
• 核心概念/原則： RWD，移動端優先
• 框架大小： 326.9 KB（如果包含uikit-icons.min.js與SVG圖標相關的功能，則為384.4 KB ）
• 預處理器：少，Sass
• 響應式布局：是
• 模塊化：是
• 啟動模板/布局：是
• 圖標集： UIkit自帶SVG圖標系統和類庫，其中包含越來越多的大綱圖標。
• 額外/附加組件：是
• 獨特的組件：Article, Flex, Cover, HTML Editor
• 文件：好
• 自定義：高級GUI定制程序僅在版本2（以前的版本）中可用
• 瀏覽器支持： Chrome，Firefox，Safari，IE9 +
• 許可證：MIT
   

UIkit說明

什么是最適合你的框架？

• 所選的框架有足夠的人氣嗎？更多的人氣意味著更多的人參與項目，也意味著有更多的教程和社區文章、更多的實例和網站、更多的第三方擴展、更好的相關的Web產品可與其集成。受歡迎程度也意味著框架更具前瞻性，因為具有更大社區的框架不太可能被拋棄。
• 框架是否正在積極發展？一個好的框架需要不斷地使用最新的web技術，特別是在移動端方面。
• 框架是否達到成熟？如果一個特定的框架在現實項目中還沒有被使用和測試，那么將其用于你的專業項目，可能不是一個明智的選擇。
• 框架是否提供了良好的文檔？為了方便學習過程，總是需要良好的文檔。
• 框架的特異性是什么？這里的要點是，與具有高級別特異性的框架相比，更通用的框架更容易使用。在大多數情況下，最好選擇一個應用最小樣式的框架，因為它更容易自定義。與重寫現有的CSS規則相比，添加新的CSS規則是一個更方便有效的做法。
   

前端開發工具介紹：