藍(lán)藍(lán)設(shè)計(jì)( m.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面和用戶體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我們更快更好地實(shí)現(xiàn)一些現(xiàn)代化的界面，包括一些移動(dòng)設(shè)備的網(wǎng)頁(yè)界面風(fēng)格設(shè)計(jì)。本文分享了10個(gè)的CSS UI開(kāi)源框架，有幾個(gè)確實(shí)不錯(cuò)，一起來(lái)看看。

1、Bootstrap– 最流行的Web前端UI框架

Bootstrap是由twitter推出的Web前端UI框架，它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開(kāi)發(fā),是一個(gè)CSS/HTML框架。它使用了的瀏覽器技術(shù)，Bootstrap提供了時(shí)尚的排版樣式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。

官方網(wǎng)站：http://getbootstrap.com/

2、jQuery UI - 基于jQuery的開(kāi)源Javascript框架

jQuery UI是一款基于jQuery的開(kāi)源Javascript框架，jQuery UI框架主要提供了用戶交互、動(dòng)畫、和可更換主題的可視控件，讓開(kāi)發(fā)者可以更方便地實(shí)現(xiàn)網(wǎng)頁(yè)交互界面，jQuery UI的整個(gè)框架比較龐大，但你也可以根據(jù)自己需要使用的功能生成適合自己的框架底層。jQuery UI界面設(shè)計(jì)非常漂亮，值得一試。

官方網(wǎng)站：http://jqueryui.com/

3、jQuery UI Bootstrap

它是jQuery UI和Bootstrap的集成，它是Bootstrap樣式的，因此外觀比較漂亮，同時(shí)它擁有jQuery UI的控件功能，這也方便開(kāi)發(fā)者快速地創(chuàng)建一個(gè)網(wǎng)頁(yè)控件。

官方網(wǎng)站：https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/

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

BootMetro是一款基于Bootstrap的前端UI框架，BootMetro的特點(diǎn)是可以很方便地構(gòu)建類似Windonws 8扁平化風(fēng)格的網(wǎng)頁(yè)界面，效果非常不錯(cuò)。

官方網(wǎng)站：http://aozora.github.io/bootmetro/

5、Flat UI - 扁平風(fēng)格 UI 工具包

Flat UI是一套精美的扁平風(fēng)格 UI 工具包，基于 Twitter Bootstrap 實(shí)現(xiàn)。這套界面工具包含許多基本的和復(fù)雜的 UI 部件，例如按鈕，輸入框，組合按鈕，復(fù)選框，單選按鈕，標(biāo)簽，菜單，進(jìn)度條和滑塊，導(dǎo)航元素等等。

官方網(wǎng)站：https://github.com/designmodo/Flat-UI

6、網(wǎng)易CSS框架 NEC

NEC是網(wǎng)易推出的開(kāi)源前端CSS框架，NEC提供了豐富UI代碼庫(kù)和插件，可以極大的幫助開(kāi)發(fā)人員提高開(kāi)發(fā)效率。即使你并非前端專業(yè)開(kāi)發(fā)人員，利用NEC你也可以快速地構(gòu)建屬于自己的網(wǎng)頁(yè)應(yīng)用。

官方網(wǎng)站：http://nec.netease.com/

7、Alloy UI – 功能強(qiáng)大的CSS UI框架

Alloy UI是基于YUI 3的前段UI框架，包含一套豐富的（超過(guò)60）UI 部件，如圖片庫(kù)，對(duì)話框，樹(shù)形結(jié)構(gòu)，面板，自動(dòng)完成，按鈕，日歷控件，工具條等。

官方網(wǎng)站：http://alloyui.com/

8、Cardinal – 移動(dòng)端的CSS UI框架

Cardinal 是一個(gè)小型的移動(dòng)優(yōu)先的 CSS 框架，提供很多有用的默認(rèn)樣式、可縮放排版、可重用模塊和一個(gè)簡(jiǎn)單的響應(yīng)式表格系統(tǒng)。

官方網(wǎng)站：http://cardinalcss.com/

9、快速開(kāi)發(fā)CSS的框架 CSScaffold

不同于許多CSS框架，它必須依靠PHP與Apache的mod_rewrite來(lái)執(zhí)行，但也因?yàn)樾枰@兩種東西，讓CSScaffold變得很神奇、很方便，寫起CSS來(lái)又快又輕松！

官方網(wǎng)站：http://www.w3avenue.com/2009/10/13/csscaffold-php-based-css-framework/

10、后臺(tái)UI開(kāi)發(fā)框架 MuseUI

一款基于bootstrap風(fēng)格，兼容于主流瀏覽器（包括IE6）的后端UI開(kāi)發(fā)組件。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里