昨天有個(gè)同事問(wèn)我有沒(méi)有可以直接上手的前端UI框架。

那今天就給大家推薦6個(gè)簡(jiǎn)單、視覺(jué)體驗(yàn)好的前端框架

沒(méi)吃過(guò)豬肉，肯定見(jiàn)過(guò)豬跑！

Jquery Mobile

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

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

這個(gè)應(yīng)該是最簡(jiǎn)單的，能夠快速上手了！

jQuery Mobile 還發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng) UI組件。支持全球主流的移動(dòng)平臺(tái)。

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

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

ColorUI

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

官網(wǎng)地址：
https://www.color-ui.com/

鮮亮的高飽和色彩，專(zhuān)注視覺(jué)的小程序組件庫(kù)

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

github上標(biāo)星高達(dá)8.8k

相信你肯定有用過(guò)使用ColorUI的小程序

如果要開(kāi)發(fā)小程序，這款開(kāi)源框架是一個(gè)不錯(cuò)的選擇。

Material

material design風(fēng)格的前端css框架

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

中文學(xué)習(xí)站：
http://www.materializecss.cn/

使用非常簡(jiǎn)單，只需要引入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>

可以使我們的頁(yè)面顏色更鮮艷，動(dòng)畫(huà)效果更突出（符合Material Design的設(shè)計(jì)風(fēng)格）

究竟什么是Material Design?

設(shè)計(jì)是創(chuàng)造的藝術(shù)，我們的目標(biāo)就是要滿(mǎn)足不同的人類(lèi)需要。人們的需要會(huì)隨著時(shí)間發(fā)展，我們的設(shè)計(jì)，實(shí)踐，以及理念也要隨之提升。我們?cè)谧晕姨魬?zhàn)，為用戶(hù)創(chuàng)造了一個(gè)可視化語(yǔ)言，它整合了優(yōu)秀設(shè)計(jì)的經(jīng)典原則和科學(xué)與技術(shù)的創(chuàng)新。這就是Material Design。

關(guān)于Material Design，其親爹谷歌是這么介紹的。

其核心思想就是把物理世界的體驗(yàn)帶進(jìn)屏幕。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過(guò)渡，配合虛擬世界的靈活特性，還原最貼近真實(shí)的體驗(yàn)，達(dá)到簡(jiǎn)潔與直觀的效果。

Layui

官網(wǎng)地址：
https://www.layui.com/

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

layui（諧音：類(lèi)UI) 是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架，遵循原生 HTML/CSS/JS 的書(shū)寫(xiě)與組織形式，門(mén)檻極低，拿來(lái)即用。

其外在極簡(jiǎn)，卻又不失飽滿(mǎn)的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開(kāi)發(fā)。

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

準(zhǔn)確地說(shuō)，她更多是為服務(wù)端程序員量身定做，你無(wú)需涉足各種前端工具的復(fù)雜配置，只需面對(duì)瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來(lái)。

weui

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

同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)

WeUI是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，為微信Web開(kāi)發(fā)量身設(shè)計(jì)，可以令用戶(hù)的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素

image

frozenui

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

image

FrozenUI的CSS組件庫(kù)，基于騰訊手Q樣式規(guī)范。特點(diǎn)FrozenUI 是一套基于移動(dòng)端的UI庫(kù)，輕量、精美、遵從手機(jī) QQ 設(shè)計(jì)規(guī)范。

適用于使用手Q規(guī)范設(shè)計(jì)的Web頁(yè)面，而針對(duì)非手Q規(guī)范的頁(yè)面，可通過(guò)修改變量定制界面主題，并且可以按需選擇需要的組件。

使用iconfont展示圖標(biāo)，包含了按鈕，列表，表單，提示，彈窗等常用組件，新增文本，布局，1px， rem，文字截?cái)?#xff0c;占位，兩端留白，兩端對(duì)齊等解決方案，同時(shí)解決了移動(dòng)端屏幕適配問(wèn)題。

結(jié)語(yǔ)

當(dāng)然如果你覺(jué)得還有更容易上手的前端ui框架，評(píng)論告訴大家把！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。