昨天有個同事問我有沒有可以直接上手的前端UI框架。

那今天就給大家推薦6個簡單、視覺體驗好的前端框架

沒吃過豬肉，肯定見過豬跑！

Jquery Mobile

demo地址：
https://demos.jquerymobile.com/1.1.0/

教程地址:
https://www.codesocang.com/jquerymobile/jquerymobile/7/index.html

這個應該是最簡單的，能夠快速上手了！

jQuery Mobile 還發布一個完整統一的jQuery移動 UI組件。支持全球主流的移動平臺。

部件是功能豐富，有狀態的插件。隨著方法和事件，有一個完整的生命周期。

如果想5分鐘就能直接上手的，Jquery Mobile首當其沖！

ColorUI

github地址：
https://github.com/weilanwl/ColorUI

官網地址：
https://www.color-ui.com/

鮮亮的高飽和色彩，專注視覺的小程序組件庫

ColorUI 是小程序組件庫，但不是純樣式庫。由于WeUI有些淡雅，可能不合某些時尚公司的風格，因此 ColorUI 也有龐大的追捧者。

github上標星高達8.8k

相信你肯定有用過使用ColorUI的小程序

如果要開發小程序，這款開源框架是一個不錯的選擇。

Material

material design風格的前端css框架

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

中文學習站：
http://www.materializecss.cn/

使用非常簡單，只需要引入css和js就行

<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

可以使我們的頁面顏色更鮮艷，動畫效果更突出（符合Material Design的設計風格）

究竟什么是Material Design?

設計是創造的藝術，我們的目標就是要滿足不同的人類需要。人們的需要會隨著時間發展，我們的設計，實踐，以及理念也要隨之提升。我們在自我挑戰，為用戶創造了一個可視化語言，它整合了優秀設計的經典原則和科學與技術的創新。這就是Material Design。

關于Material Design，其親爹谷歌是這么介紹的。

其核心思想就是把物理世界的體驗帶進屏幕。去掉現實中的雜質和隨機性，保留其最原始純凈的形態、空間關系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。

Layui

官網地址：
https://www.layui.com/

github地址：
https://github.com/sentsin/layui/

layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。

其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。

layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。

準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

weui

github地址
https://github.com/weui/weui

同微信原生視覺體驗一致的基礎樣式庫

WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，為微信Web開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素

image

frozenui

github地址
https://github.com/frozenui/frozenui

image

FrozenUI的CSS組件庫，基于騰訊手Q樣式規范。特點FrozenUI 是一套基于移動端的UI庫，輕量、精美、遵從手機 QQ 設計規范。

適用于使用手Q規范設計的Web頁面，而針對非手Q規范的頁面，可通過修改變量定制界面主題，并且可以按需選擇需要的組件。

使用iconfont展示圖標，包含了按鈕，列表，表單，提示，彈窗等常用組件，新增文本，布局，1px， rem，文字截斷，占位，兩端留白，兩端對齊等解決方案，同時解決了移動端屏幕適配問題。

結語

當然如果你覺得還有更容易上手的前端ui框架，評論告訴大家把！

往期推薦

怪不得同事的上網從沒廣告，原來一直偷偷安裝了這三款插件

爬蟲利器XPath Helper，高效解析網頁內容

收藏級干貨：Chrome插件(擴展)開發全攻略

推薦一個有趣的開源項目，藏著git快速入門的秘密！

開源神器：微信頭像卡通化，馬上520了，推薦嘗試！

總結

以上是生活随笔為你收集整理的后端程序员转行前端，强烈推荐这6个前端UI框架，第二款小程序UI框架颜值最高！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。