前端開發是一項非常繁瑣的工作，你不僅需要擁有和別人不一樣的審美觀和設計觀，而且需要了解諸如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

SemanticUI是一款語義化的前端開發框架，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，如果你在使用BootSnap，那么就更加方便了。
持續更新中。更新和維護是一款優秀開源軟件的標志。

在線預覽

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

jQuery UIBootstrap是一個將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，你可以快速的實現較為復雜的網頁布局排版。

EZ-CSS的特點

最大的特點就是框架很小，才1K，因此可以將其集成到任何相應的樣式表中。
簡化排版，原先需要很復雜的CSS代碼才實現的排版布局，EZ-CSS可以分分鐘搞定。
輕松實現多列布局，并且可以指定任意的寬度。

在線預覽

本文固定鏈接:http://www.i7758.com/archives/2309.html

總結

以上是生活随笔為你收集整理的你应该知道的9个优秀的CSS框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。