日韩亚洲视频一,午夜影视频,色五月成人

分享5個2017 年最受歡迎的前端框架

原創|產品更新|編輯：蔣永|2017-05-24 16:22:07.000|閱讀 937 次

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

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

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

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

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

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

1. Bootstrap

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

Bootstrap

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

Bootstrap 注意事項

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

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

2. Foundation (來自 ZURB）

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

ZURB Foundation

所屬: ZURB
發布時間: 2011
當前時間:6.3.1
受歡迎程度: 在 Github 收獲 25,400 個點贊
描述: “最高級的響應式前端框架”
核心概念: RWD, 移動優先，語義化
框架體積: 197.5 KB
預處理器: Sass
響應式: Yes
模塊化: Yes
模板/布局: Yes
圖標集:
插件/擴展: 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 是一個真正專業的框架，提供商業支持和咨詢服務。同時提供很多資源去幫你快速輕松的學習和使用該框架。

3. Semantic UI

 一直在持續發展，構建更具語義的 Web 網站。其利用自然語言原則，使得代碼更加具備可讀性和易于理解。

Semantic UI

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

Semantic UI 注意事項

Semantic 是最具創新以及全功能的框架。框架的整體結構和命名都有明確的邏輯和語義，在這方面碾壓其他框架。

4. Pure 來自 Yahoo!

是一個輕量級、模塊化的框架，使用純 CSS 編寫，其包括的所有組件都可以在一起或者單獨使用。

Pure by Yahoo!

所屬: Yahoo
發布時間: 2013
當前版本: 0.6.2
受歡迎程度: 在 Github 收獲 16,637 個點贊
描述: “一組小的、響應式的 CSS 模塊，可以用于任一 Web 項目”
核心概念:, 極簡主義.
框架提及: 16 KB
預處理器: None
響應式: Yes
模塊化: Yes
模板/布局: Yes
圖標集合: 無，你可以使用 Font Awesome .
插件/擴展: None
獨特組件: None
文檔: 好
定制: 基本的 GUI 皮膚構建器
瀏覽器支持: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
許可證:

Pure 備注說明

Pure 只提供了很簡單的基本骨架，這對很多不需要一個全功能框架的人來說是非常棒的。

5. UIkit 來自 YOOtheme

是一個易于使用和定制的簡單組件集合。雖然與其競爭對手比較，受歡迎程度沒那么高，但是它同樣提供了相同的功能和質量。

UIkit

所屬:
發布時間: 2013
當前版本: 3.0.0
受歡迎程度: 在 Github 收獲 9,422 個點贊
描述: “一個輕量級模塊化的前端框架，用于快速開發強大的 Web 界面”
核心概念: RWD, 移動優先
框架提及: 326.9 KB (384.4 KB 如果包含 uikit-icons.min.js 和相關 SVG 圖標時)
預處理器: Less, Sass
響應式: Yes
模塊化: Yes
模板/布局: Yes
圖標集: UIkit 包含自己的 SVG 圖標系統和庫
插件/擴展: Yes
獨特組件: Article, Flex, Cover, HTML Editor
文檔: Good
定制: 高級 GUI 定制器，只在版本 2 中提供
瀏覽器支持: Chrome, Firefox, Safari, IE9+
許可證: MIT

UIkit 備注說明

UIkit 在很多的中成功使用。提供了靈活而強大的手工定制機制（老版本還提供高級的 GUI 定制器）

選擇適合你的框架

最后讓我們給你一些框架選擇的指南。下面是一些你在選擇框架時需要著重考慮的事項：

框架是否有足夠的 受歡迎程度? 受歡迎程度越高說明更多的人在使用這個項目，同時也擁有更多的教程以及文章，更多實際的例子和網站，更多第三方的擴展和更好的集成到相關的 Web 開發項目。同時也說明該框架不容易過時，一個強大社區支持的項目是不太可能被放棄的
框架是否仍然 開發活躍? 一個好的框架必須緊跟技術發展的步伐，支持最新的 Web 技術，特別是對移動方面的技術支持
框架是否已經成熟? 如果一個還沒有在實際的項目中開始使用和測試，那么在你的專業項目中選擇它是不明智的
框架是否提供 良好的文檔? 好的文檔可是為了更方便的學習
框架的 專業水準 如何？這一點主要是一個更通用的框架的專業水準應該很高，但又非常容易學習使用。在大多數情況下，最好選擇最少樣式的，因為這樣更容易進行定制。添加新的 CSS 規則比修改和重寫現有的規則更加便捷和高效。此外，如果你在已有規則之上增加新的規則，就會發現這些無用的規則加大了 CSS 本身的體積。