前端開發(fā)是一項(xiàng)非常繁瑣的工作，你不僅需要擁有和別人不一樣的審美觀和設(shè)計(jì)觀，而且需要了解諸如HTML、CSS、JavaScript等錯(cuò)綜復(fù)雜的技術(shù)，因此選擇一些優(yōu)秀的CSS框架或許可以幫助你大大提高工作效率。本文向你推薦了9個(gè)還不錯(cuò)的CSS框架，希望對(duì)你有所幫助。

1、Twitter開源杰作 - Bootstrap

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

Bootstrap的特點(diǎn)

• 強(qiáng)大的開發(fā)團(tuán)隊(duì)。Bootstrap由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，Bootstrap開發(fā)團(tuán)隊(duì)也是國(guó)際上公認(rèn)最優(yōu)秀的前端開發(fā)團(tuán)隊(duì)之一。
• 極簡(jiǎn)的框架。Bootstrap的設(shè)計(jì)非常簡(jiǎn)單，這就意味著，無論你是高級(jí)的前端設(shè)計(jì)師，還是普通的程序員，都能夠很快地掌握Bootstrap的開發(fā)流程和開發(fā)方式。
• 跨設(shè)備、跨瀏覽器最初設(shè)想的Bootstrap只支持現(xiàn)代瀏覽器，不過新版本已經(jīng)能支持所有主流瀏覽器，甚至包括IE7。從Bootstrap 2開始，提供對(duì)平板和智能手機(jī)的支持。
• 完美的響應(yīng)式設(shè)計(jì)。Bootstrap支持響應(yīng)式布局，可以智能識(shí)別客戶端瀏覽器的類型，從而構(gòu)造適應(yīng)當(dāng)前設(shè)備前端布局，這一切都是全自動(dòng)的。
• 支持HTML5和CSS3。Bootstrap支持所有的HTML5標(biāo)簽和CSS3屬性。
• 使用LESS構(gòu)建動(dòng)態(tài)樣式。當(dāng)傳統(tǒng)的枯燥CSS寫法止步不前時(shí)，LESS技術(shù)橫空出世。LESS使用變量、嵌套、操作、混合編碼，幫助用戶花費(fèi)很小的時(shí)間成本，編寫更快、更靈活的CSS。

2、扁平化UI開發(fā)包 - Flat UI

Flat UI是一款基于Bootstrap的扁平化前端UI工具包，F(xiàn)lat UI的組件外觀設(shè)計(jì)非常清新和漂亮，F(xiàn)lat UI的組件包含按鈕，輸入框，組合按鈕，復(fù)選框，單選按鈕，標(biāo)簽，菜單，進(jìn)度條和滑塊等精美的元素。

Flat UI的特點(diǎn)

• 包含很多基本的用戶界面，同時(shí)也可以靈活創(chuàng)建更多自定義的UI界面組件
• 包含豐富的矢量圖標(biāo)和符號(hào)
• 自定義調(diào)色板
• 基于HTML / CSS、JavaScript的布局

3、語義化前端開發(fā)框架 - Semantic UI

Semantic UI 是一款語義化的前端開發(fā)框架，Semantic是圍繞自然交流語言而架構(gòu)的，這使得開發(fā)更加直觀（易于理解）。跟Bootstrap不同，Semantic在功能特性上、布局設(shè)計(jì)上、用戶體驗(yàn)上更貼近自然語言。

Semantic UI的特點(diǎn)

• 文檔和演示非常完善
• 易于學(xué)習(xí)和使用
• 配備網(wǎng)格布局
• 支持 Sass 和 LESS 動(dòng)態(tài)樣式語言
• 有一些非常實(shí)用的附加配置，例如inverted類。
• 對(duì)于社區(qū)貢獻(xiàn)來說是比較開放的。
• 有一個(gè)非常好的按鈕實(shí)現(xiàn)，情態(tài)動(dòng)詞，和進(jìn)度條。
• 在許多功能上使用圖標(biāo)字體。

4、Metro風(fēng)格的CSS框架 - BootMetro

和Flat UI一樣，BootMetro同樣也是一款基于Bootstrap的CSS框架，BootMetro的最大特點(diǎn)在于它是一款Win 8 Metro風(fēng)格的CSS框架。Metro風(fēng)格的優(yōu)勢(shì)在于界面簡(jiǎn)潔平滑，UI元素簡(jiǎn)單，加載速度快，并且有不錯(cuò)的視覺效果。

BootMetro的特點(diǎn)

• 基于強(qiáng)大的Twitter Bootstrap，框架的靈感源于 Metro UI CSS
• 讓用戶更專注于網(wǎng)站的內(nèi)容，因?yàn)镸etro風(fēng)格可以更加突出網(wǎng)頁的主要內(nèi)容。
• 完全免費(fèi)，和Bootstrap一樣，BootMetro的使用也是非常簡(jiǎn)單。

5、雅虎開源杰作 – Pure

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

Pure的特點(diǎn)

• 最大的特點(diǎn)就是框架基于純CSS，無任何JavaScript代碼，渲染速度比較快。
• 由Yahoo出品，技術(shù)上應(yīng)該不存在太大問題。
• 框架十分小巧，壓縮后僅5.7k。
• 組件也很豐富，包括表格、表單、按鈕、表、導(dǎo)航等。
• CSS類的標(biāo)識(shí)十分簡(jiǎn)單，因此在使用Pure的過程中代碼會(huì)比較友好。

6、Win 8 Metro風(fēng)格的CSS框架 - Metro UI CSS

Metro UI CSS 是一款Win 8 Metro風(fēng)格的CSS框架，同時(shí)，之前介紹過的那款BootMetro也是基于Metro UI CSS的，我們可以利用Metro UI CSS構(gòu)建很棒的Metro風(fēng)格應(yīng)用。

Metro UI CSS 的特點(diǎn)

• Win 8 Metro風(fēng)格，界面清爽平滑
• 學(xué)習(xí)非常簡(jiǎn)單
• 源代碼很小巧
• 基于MIT開源協(xié)議

7、免費(fèi)的Bootstrap主題包 - Bootswatch

Bootswatch 是一款基于 Bootstrap 的免費(fèi)主題包，其中包含了豐富的 Bootstrap 主題，你可以下載安裝這些主題的 CSS 文件，實(shí)現(xiàn)各種各樣漂亮的 Bootstrap 主題風(fēng)格。

Bootswatch 的特點(diǎn)

• 安裝非常方便。只需要下載對(duì)應(yīng)主題的CSS文件，替換原來的文件即可，無需安裝二進(jìn)制文件。
• 完全開源?；贛IT開源協(xié)議，你也可以前往Bootswatch的開源社區(qū)進(jìn)行問題討論。
• 模塊化?？梢愿屿`活地控制和改變樣式。
• 插件化。已經(jīng)為各個(gè)平臺(tái)提供了API，如果你在使用NodeBB, BootSnap，那么就更加方便了。
• 持續(xù)更新中。更新和維護(hù)是一款優(yōu)秀開源軟件的標(biāo)志。

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

jQuery UI Bootstrap是一個(gè)將jQuery UI集成到Bootstrap上的CSS框架，jQuery UI Bootstrap不僅可以利用jQuery UI強(qiáng)大的控件庫(kù)，同時(shí)還可以享受Bootstrap那種清新自然的主題風(fēng)格，所以越來越多的前端開發(fā)者都在使用jQuery UI Bootstrap。

jQuery UI Bootstrap的特點(diǎn)

• 基于jQuery UI，因此控件功能非常強(qiáng)大，可以使用全部的jQuery UI控件。
• 基于Bootstrap，不同控件有了統(tǒng)一的外觀。
• 免費(fèi)開源，你可以很方便地下載和使用。

9、輕量級(jí)CSS布局排版框架 – EZ-CSS

EZ-CSS是一款輕量級(jí)的CSS布局排版框架，EZ-CSS和其他的CSS框架有很大的不同，因?yàn)樗苄?，?kb。而且EZ-CSS的擴(kuò)展性很強(qiáng)，對(duì)瀏覽器兼容性較為友好，利用EZ-CSS，你可以快速的實(shí)現(xiàn)較為復(fù)雜的網(wǎng)頁布局排版。

EZ-CSS的特點(diǎn)

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

還有很多優(yōu)秀的CSS框架，我們正在為大家努力收集，希望這些CSS框架資源對(duì)你有所幫助。