對這文章發表回應

網頁工程師必知：9 個超好用的 CSS 框架

by:  Codeceo 2015-05-13 CSS、 工具、 工程師、 網頁設計

前端開發是一項非常繁瑣的工作，你不僅需要擁有和別人不一樣的審美觀和設計觀，而且需要了解諸如 HTML、CSS、JavaScript 等錯綜複雜的技術，因此選擇一些優秀的 CSS 框架或許可以幫助你大大
提高工作效率。

本文向你推薦了 9 個還不錯的 CSS 框架，希望對你有所幫助。

• 1、Twitter 開源傑作 Bootstrap

Bootstrap 是一款由 Twitter 推出的開源 CSS 框架，它的核心是由一系列用於 Web 前端開發的工具包組成。Bootstrap 基於 HTML、CSS 和 JavaScript，是一款非常適合敏捷 Web 開發的 CSS 框架，Bootstrap 同時也是 Github 上最熱門的開源項目之一。

Bootstrap 的特點

·強大的開發團隊。Bootstrap 由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發，Bootstrap 開發團隊也是國際上公認最優秀的前端開發團隊之一。

·極簡的框架。Bootstrap 的設計非常簡單，這就意味著，無論你是高級的前端設計師，還是普通的 程序員，都能夠很快地掌握 Bootstrap 的開發流程和開發方式。

·跨設備、跨瀏覽器最初設想的 Bootstrap 只支持現代瀏覽器，不過新版本已經能支持所有主流瀏覽器，甚至包括 IE7。從 Bootstrap 2 開始，提供對平板和智能手機的支持。

·完美的響應式設計。Bootstrap 支持響應式佈局，可以智能識別客戶端瀏覽器的類型，從而構造適應當前設備前端佈局，這一切都是全自動的。

·支持 HTML5 和 CSS3。Bootstrap 支持所有的 HTML5 標籤和 CSS3 屬性。

·使用 LESS 構建動態樣式。當傳統的枯燥 CSS 寫法止步不前時，LESS 技術橫空出世。LESS 使用變量、嵌套、操作、混合編碼，幫助用戶花費很小的時間成本，編寫更快、更靈活的 CSS。

• 2、扁平化 UI 開發包 – Flat UI

Flat UI 是一款基於 Bootstrap 的扁平化前端 UI 工具包，Flat UI 的組件外觀設計非常清新和漂亮，Flat UI 的組件包含按鈕，輸入框，組合按鈕，複選框，單選按鈕，標籤，菜單，進度條和滑塊等精美的元素。

Flat UI 的特點

·包含很多基本的用戶界面，同時也可以靈活創建更多自定義的 UI 界面組件

·包含豐富的矢量圖標和符號

·自定義調色板

·基於 HTML / CSS、JavaScript 的佈局

• 3、語義化前端開發框架 –
  Semantic UI

Semantic UI 是一款語義化的前端開發框架，Semantic 是圍繞自然交流語言而架構的，這使得開發更加直觀（易於理解）。跟 Bootstrap不同，Semantic 在功能特性上、佈局設計上、用戶體驗上更貼近自然語言。

Semantic UI 的特點

·文檔和演示非常完善

·易於學習和使用

·配備網格佈局

·支持 Sass 和 LESS 動態樣式語言

·有一些非常實用的附加配置，例如 inverted 類。

·對於社區貢獻來說是比較開放的。

·有一個非常好的按鈕實現，情態動詞，和進度條。

·在許多功能上使用圖標字體。

• 4、Metro 風格的 CSS 框架 –
  BootMetro

和 Flat UI一樣，BootMetro 同樣也是一款基於 Bootstrap 的 CSS 框架，BootMetro 的最大特點在於它是一款 Win 8 Metro 風格的 CSS 框架。Metro 風格的優勢在於界面簡潔平滑，UI 元素簡單，加載速度快，並且有不錯的視覺效果。

BootMetro 的特點

·基於強大的 Twitter Bootstrap，框架的靈感源於 Metro UI CSS

·讓用戶更專注於網站的內容，因為 Metro 風格可以更加突出網頁的主要內容

·完全免費，和 Bootstrap 一樣，BootMetro 的使用也是非常簡單

• 5、雅虎開源傑作– Pure

Pure 也是一款很出色的 CSS 框架，之前分享的 Bootstrap 是由 Twitter 出品的，而 Pure 是來自雅虎的。儘管從 UI 界面效果上來說，Pure 沒有 Bootstrap 那樣精美，但 Pure 是純 CSS 實現的，因此非常小巧，整個框架壓縮後只有 5.7k 左右。

Pure 的特點

·最大的特點就是框架基於純 CSS，無任何 JavaScript 代碼，渲染速度比較快。

·由 Yahoo 出品，技術上應該不存在太大問題。

·框架十分小巧，壓縮後僅 5.7k。

·組件也很豐富，包括表格、表單、按鈕、表、導航等。

·CSS 類的標識十分簡單，因此在使用 Pure 的過程中代碼會比較友好。

• 6、Win 8 Metro 風格的 CSS 框架 – Metro UI CSS

Metro UI CSS 是一款 Win 8 Metro 風格的 CSS 框架，同時，之前介紹過的那款 BootMetro也是基於 Metro UI CSS 的，我們可以利用 Metro UI CSS 構建很棒的 Metro 風格應用。

Metro UI CSS 的特點

·Win 8 Metro 風格，界面清爽平滑

·學習非常簡單

·源代碼很小巧

·基於 MIT 開源協議

• 7、免費的 Bootstrap 主題包 – Bootswatch

Bootswatch 是一款基於 Bootstrap 的免費主題包，其中包含了豐富的 Bootstrap 主題，你可以下載安裝這些主題的 CSS 文件，實現各種各樣漂亮的 Bootstrap 主題風格。

Bootswatch 的特點

·安裝非常方便。只需要下載對應主題的 CSS 文件，替換原來的文件即可，無需安裝二進製文件。

·完全開源。基於 MIT 開源協議，你也可以前往 Bootswatch 的開源社區進行問題討論。

·模塊化。可以更加靈活地控制和改變樣式。

·插件化。已經為各個平台提供了 API，如果你在使用 NodeBB ,
BootSnap，那麼就更加方便了。

·持續更新中。更新和維護是一款優秀開源軟件的標誌。

• 8、集成在 jQuery UI 上的 Bootstrap – jQuery UI Bootstrap

jQuery UI Bootstrap 是一個將 jQuery UI 集成到 Bootstrap 上的 CSS 框架，jQuery UI Bootstrap 不僅可以利用 jQuery UI 強大的控件庫，同時還可以享受 Bootstrap 那種清新自然的主題風格，所以越來越多的前端開發者都在使用 jQuery UI Bootstrap。

jQuery UI Bootstrap 的特點

·基於 jQuery UI，因此控件功能非常強大，可以使用全部的 jQuery UI 控件。

·基於 Bootstrap，不同控件有了統一的外觀。

·免費開源，你可以很方便地下載和使用。

• 9、輕量級 CSS 佈局排版框架– EZ-CSS
  

EZ-CSS 是一款輕量級的 CSS 佈局排版框架，EZ-CSS 和其他的 CSS 框架有很大的不同，因為它很小，才 1kb。而且 EZ-CSS 的擴展性很強，對瀏覽器兼容性較為友好，利用 EZ-CSS，你可以快速的實現較為複雜的網頁佈局排版。

本文鏈接： http://www.codeceo.com/article/9-css-framework.html
本文作者： 碼農網 –小峰

（本文轉載自合作夥伴《 碼農網》；未經授權，不得轉載）