10個頂級的CSS UI開源架構

標籤：開發人員   網格   比較   web頁面   apach   根據   官方網站   工具包   裝置   

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設計理念，而且需要更酷的頁面特效和使用者體驗。作為開發人員，我們需要瞭解一些寶貴的CSS UI開源架構資源，它們可以協助我們更快更好地實現一些現代化的介面，包括一些行動裝置的網頁介面風格設計。本文分享了10個頂級的CSS UI開源架構，有幾個確實不錯，一起來看看。

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

Bootstrap是由twitter推出的Web前端UI架構，它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML架構。它使用了最新的瀏覽器技術，Bootstrap提供了時尚的排版樣式，表單，buttons，表格，網格系統等等。

官方網站：http://getbootstrap.com/

2、jQuery UI - 基於jQuery的開源Javascript架構

jQuery UI是一款基於jQuery的開源Javascript架構，jQuery UI架構主要提供了使用者互動、動畫、特效和可更換主題的可視控制項，讓開發人員可以更方便地實現網頁互動介面，jQuery UI的整個架構比較龐大，但你也可以根據自己需要使用的功能產生適合自己的架構底層。jQuery UI介面設計非常漂亮，值得一試。

官方網站：http://jqueryui.com/

3、jQuery UI Bootstrap

它是jQuery UI和Bootstrap的整合，它是Bootstrap樣式的，因此外觀比較漂亮，同時它擁有jQuery UI的控制項功能，這也方便開發人員快速地建立一個網頁控制項。

官方網站：https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/

4、BootMetro - Metro風格的CSS架構

BootMetro是一款基於Bootstrap的前端UI架構，BootMetro的特點是可以很方便地構建類似Windonws 8扁平化風格的網頁介面，效果非常不錯。

官方網站：http://aozora.github.io/bootmetro/

5、Flat UI - 扁平風格 UI 工具包

Flat UI是一套精美的扁平風格 UI 工具包，基於 Twitter Bootstrap 實現。這套介面工具包含許多基本的和複雜的 UI 組件，例如按鈕，輸入框，組合按鈕，複選框，選項按鈕，標籤，菜單，進度條和滑塊，導航元素等等。

官方網站：https://github.com/designmodo/Flat-UI

6、網易CSS架構 NEC

NEC是網易推出的開源前端CSS架構，NEC提供了豐富UI程式碼程式庫和外掛程式，可以極大的協助開發人員提高開發效率。即使你並非前端專業開發人員，利用NEC你也可以快速地構建屬於自己的網頁應用。

官方網站：http://nec.netease.com/

7、Alloy UI – 功能強大的CSS UI架構

Alloy UI是基於YUI 3的前段UI架構，包含一套豐富的（超過60）UI 組件，片庫，對話方塊，樹形結構，面板，自動完成，按鈕，日曆控制項，工具條等。

官方網站：http://alloyui.com/

8、Cardinal – 移動端的CSS UI架構

Cardinal 是一個小型的移動優先的 CSS 架構，提供很多有用的預設樣式、可縮放排版、可重用模組和一個簡單的響應式表格系統。

官方網站：http://cardinalcss.com/

9、快速開發CSS的架構 CSScaffold

不同於許多CSS架構，它必須依靠PHP與Apache的mod_rewrite來執行，但也因為需要這兩種東西，讓CSScaffold變得很神奇、很方便，寫起CSS來又快又輕鬆！

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

10、後台UI開發架構 MuseUI

一款基於bootstrap風格，相容於主流瀏覽器（包括IE6）的後端UI開發組件。

官方網站：http://git.oschina.net/muse/museui

10個頂級的CSS UI開源架構