你應該知道的9個優秀的CSS框架

一、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。

二、扁平化UI開發包 - Flat UI

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


Flat UI的特色

• 包含不少基本的用戶界面，同時也能夠靈活建立更多自定義的UI界面組件
• 包含豐富的矢量圖標和符號
• 自定義調色板
• 基於HTML / CSS、JavaScript的佈局

三、語義化前端開發框架 - Semantic UI

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



Semantic UI的特色

• 文檔和演示很是完善
• 易於學習和使用
• 配備網格佈局
• 支持 Sass 和 LESS 動態樣式語言
• 有一些很是實用的附加配置，例如inverted類。
• 對於社區貢獻來講是比較開放的。
• 有一個很是好的按鈕實現，情態動詞，和進度條。
• 在許多功能上使用圖標字體。

四、Metro風格的CSS框架 - BootMetro

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


BootMetro的特色

• 基於強大的Twitter Bootstrap，框架的靈感源於 Metro UI CSS
• 讓用戶更專一於網站的內容，由於Metro風格能夠更加突出網頁的主要內容。
• 徹底免費，和Bootstrap同樣，BootMetro的使用也是很是簡單。

五、雅虎開源傑做 – Pure

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

Pure的特色

• 最大的特色就是框架基於純CSS，無任何JavaScript代碼，渲染速度比較快。
• 由Yahoo出品，技術上應該不存在太大問題。
• 框架十分小巧，壓縮後僅5.7k。
• 組件也很豐富，包括表格、表單、按鈕、表、導航等。
• CSS類的標識十分簡單，所以在使用Pure的過程當中代碼會比較友好。

六、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開源協議

七、免費的Bootstrap主題包 - Bootswatch

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

Bootswatch 的特色

• 安裝很是方便。只須要下載對應主題的CSS文件，替換原來的文件便可，無需安裝二進制文件。
• 徹底開源。基於MIT開源協議，你也能夠前往Bootswatch的開源社區進行問題討論。
• 模塊化。能夠更加靈活地控制和改變樣式。
• 插件化。已經爲各個平臺提供了API，若是你在使用NodeBB, BootSnap，那麼就更加方便了。
• 持續更新中。更新和維護是一款優秀開源軟件的標誌。

八、集成在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，不一樣控件有了統一的外觀。
• 免費開源，你能夠很方便地下載和使用。

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

EZ-CSS是一款輕量級的CSS佈局排版框架，EZ-CSS和其餘的CSS框架有很大的不一樣，由於它很小，才1kb。並且EZ-CSS的擴展性很強，對瀏覽器兼容性較爲友好，利用EZ-CSS，你能夠快速的實現較爲複雜的網頁佈局排版。


EZ-CSS的特色

• 最大的特色就是框架很小，才1K，所以能夠將其集成到任何相應的樣式表中。
• 簡化排版，原先須要很複雜的CSS代碼才實現的排版佈局，EZ-CSS能夠分分鐘搞定。
• 輕鬆實現多列布局，而且能夠指定任意的寬度。

還有不少優秀的CSS框架，咱們正在爲你們努力收集，但願這些CSS框架資源對你有所幫助。