10個頂級的CSS UI開源框架

2021-02-15 程序猿

隨著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

來自：碼農網

連結：http://www.codeceo.com/article/top-10-css-ui-framework.html

——————————————————

●本文編號408，以後想閱讀這篇文章直接輸入408即可。

●本文分類「前端」、「CSS」，搜索分類名可以獲得相關文章。

●輸入m可以獲取到全部文章目錄

●輸入r可以獲取到熱門文章推薦

●輸入f可以獲取到全部分類名稱

—————————————————

小猿個人微信：itcodemonkey 歡迎調戲


推薦一個微信公眾號：IT電商網，長按下面的微信號可以進行複製

itdianshang


點擊「閱讀原文」可關注


相關焦點

  • 前端UI框架小匯總
    希望對尋找UI框架的小夥伴們提供點幫助。以下對前端UI框架的移動端、PC端和混合APP的應用進行了列舉。 移動端UI框架Mint UI（餓了麼團隊）　　中文官網：http://mint-ui.github.io/#!
  • 15 個優秀的響應式 CSS 框架
    本文匯總了一些優秀的響應式 Web 設計 HTML 和 CSS 框架。這些框架都是開源的並免費的。對響應式 Web 框架進行比較並不那麼容易。有的框架適合設計更快、更精簡網站的某些功能，而有些可能提供了大量功能、插件和附加組件，但是可能體積會比較龐大並且上手較難。1. Bootstrap
  • 後端程式設計師轉行前端,強烈推薦這6個前端UI框架,第二款小程序UI框架顏值最高!
    昨天有個同事問我有沒有可以直接上手的前端UI框架。那今天就給大家推薦6個簡單、視覺體驗好的前端框架沒吃過豬肉，肯定見過豬跑！如果要開發小程序，這款開源框架是一個不錯的選擇。Materialmaterial design風格的前端css框架官方網站：http://materializecss.com/中文學習站：http://www.materializecss.cn/
  • 9個用於web前端開發的CSS開源框架
    css是任何網頁中最重要的，根據維基百科的記錄，它甚至可以被稱為全球資訊網三大基礎技術之一，但它也最容易被人遺忘的部分之一。本文將與你探討9款流行的、功能強大且開源的框架，讓你的css開發得以輕鬆構建精緻的網絡前端。
  • 2020年GitHub高贊vue的UI框架
    隨著vue的開發者越來越多，各種框架也漸漸多起來，面對眾多的框架，如何選擇一款適合自己業務的框架，還是一件比較糾結的事情，今天總結了一下2020年GitHub上面比較受歡迎，star較高的幾個UI框架。
  • 跟大家分享一下 目前最流行的移動Web前端UI框架
    在移動Web開發的過程中，使用合適的移動WEB UI框架可以大大提升我們的開發效率。下面就把目前最流行的移動Web前端UI框架分享給大家。（所有連結地址，請複製到瀏覽器打開。）Amaze UIAmaze UI是一個輕量級（所有CSS和JS gzip後100kB左右）、Mobile first的前端框架， 基於開源社區流行前端框架編寫。
  • 創新高性能移動 UI 框架-Canvas UI 框架
    最近有人在知乎討論 React Native，我也湊個熱鬧，來個技術貼。WebView 裡無法獲得的能力雖然是「體驗增強」與「端基本能力」，但現都基本上有成熟解決方法。但 framework，除了 UI 組件本身以外，還需要有 Layout，而 css 只適用於瀏覽器本身的 layout 而無法適用於 Canvas 畫布。要給開發者好且排版可控的方案，那就要開發一個用 JavaScript 實現類似 CSS 的布局子集的框架。否則 UI 的組件在畫布上沒有 layout 就無意義。
  • 8個強大的基於Bootstrap的CSS框架
    做過前端開發的小夥伴們應該對Bootstrap不會陌生，它是由Twitter推出的開源CSS框架，其中包含了很多Web前端開發的工具包和應用組件
  • 盤點:11個最流行的前端框架,UI必備
    作為開發者，我們需要了解一些不錯的CSS UI開源框架資源，幫助我們更快更好地實現一些現代化的界面，今天小編就給大家分享11個最流行的前端框架，UI必備，一起來看看吧。2、ATUI at-ui 是一款基於 Vue 2.x 的前端 UI 組件庫，主要用於快速開發 PC 網站產品。它提供了 npm + webpack + babel 前端開發工作流程，CSS 樣式獨立，即使採用不同的框架實現都能保持統一的 UI 風格，挺實用的。
  • 9 個用於前端 Web 開發的開源 CSS 框架 | Linux 中國
    本文將探討九種流行的、強大的、開源的框架，是這些框架讓構建漂亮的網站前端的 CSS 開發變得簡單明了。BootstrapBootstrap 無疑是最流行的 CSS 框架，它是所有前端 Web 設計的開端。Bootstrap 由 Twitter 開發，提供了可用性、功能性和可擴展性。
  • 28個頂級的React UI組件庫,請查收!
    React 和 Onsen UI 框架。地址：https://github.com/elementalui/elementalRebass 的 Star 數為 4K，它包含 60 個組件，是一個 UI 庫及 UI 設計系統。
  • 12 個可用的小型 CSS 框架
    Pure 是雅虎的一個開源項目，是一套可以幫你快速構建響應式設計的 CSS 模塊，Pure 為所有的 HTML 元素都設置了基本樣式，基本模塊有：柵格系統、WEB表單、按鈕、表格、導航菜單等。6. FOX CSS 是一個輕量級、模塊化的 CSS 框架，採用移動優先的設計方式，甚至支持 IE9。9. Basscss
  • 2015 年開源前端框架盤點 TOP 20
    2015年已經過去了，作為一個前端開發者，我覺得有必要把過去一年幫助過我或朋友們的優秀開源前端框架做個盤點，希望這些項目能夠越來越好，幫助到更多的前端開發者們
  • 2015年開源前端框架盤點TOP20
    2015年已經過去了，作為一個前端開發者，我覺得有必要把過去一年幫助過我或朋友們的優秀開源前端框架做個盤點，希望這些項目能夠越來越好
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    vuetify 贊助商列表Vuetify 使用體驗如何？Material Design 發布至今，因為其優秀獨特的操作體驗，被廣泛應用在各類應用程式的界面構建上。Vuetify 作為一個在全球範圍內非常受歡迎的開源項目，使得熟悉 Vue.js 開發的工程師能夠快速做出同樣優秀的應用。這個 UI 框架的質量不用過多吹捧，無論是移動端還是 PC 端還是自適應的產品需求，都是勝任。如果接到的產品需求在設計上希望能和國內大部分諸如element ui、ant design之類的中性框架有區別，或者用戶面向國外，我強烈推薦選擇 Vuetify 。
  • 常用的CSS框架
    常用的CSS框架之前在寫自己的個人網站的時候，由於自己Web前端不是特別好，於是就去找相關的CSS框架來搭建頁面了。找到以下這麼一篇文章(列出了很多常用的CSS框架)：BootstrapSemantic-uiFoundationMaterializeMaterial-uiPhantomjsPureFlat-uiJquery-uiReact-bootstrap
  • 10大html5前端框架
    Amaze UI第二個介紹的是妹子UI，最初使用它是因為本尊遇到了一個愛糾結細節設計士，有一次她跟我的字體較上真了，結果一句頂萬句的 BOOS 誇了她，我只好根據她的想法去解決，結果最後找到了Amaze UI 框架( 我不介意你叫我懶淫 )，按照官方的話說就是 "基於社區開源項目構建的一個跨屏前端框架，以移動優先，從小屏到大屏，最終實現所有屏幕適配
  • UI庫(CSS+HTML)
    由這四個組成我們的"盒子"。前端的CSS框架但是現在有兩個主要的動態css語言，LESS和SASS，給css提供了變量，mixin，運算符等功能，讓寫出模塊化的css框架成為可能。Bootstrap現在基本是歐美這裡最流行的框架，基於LESS，最近升級2.0以後完全模塊化，也不需要太多配置，很好用。這個框架對大部分元素的視覺細節都已經做得很完整，基本上你只需要寫html，加幾個class，就可以做出像模像樣的頁面了，做起prototype來嗷嗷快。不過這也是個缺點，因為用的人多了樣式都長一個樣...
  • Vue移動端UI框架指南
    自從Vue成為前端的主流框架之後，各家UI框架也越來越多，今天重點聊一聊移動端的那些框架吧，Vue移動端框架到底哪家強？以下排名不分先後，開發過程中根據自己的具體業務需求來做選擇。1.Vux中文文檔：https://vux.li/#/在線預覽：https://vux.li/demos/v2/?
  • 有了這9款前端CSS開源框架,經理不再說我做得醜了!
    本文將與你探討9款流行的、功能強大且開源的框架，讓你的css開發得以輕鬆構建精緻的網絡前端。1、Bootstrap   Bootstrap無疑是最受歡迎的css框架，它是最早的web前端框架之一。MDCWeb擁有5700多個提交和349個貢獻者。