后端程序员转行前端,强烈推荐这6个前端UI框架,第二款小程序UI框架颜值最高!...
昨天有個(gè)同事問我有沒有可以直接上手的前端UI框架。
那今天就給大家推薦6個(gè)簡單、視覺體驗(yàn)好的前端框架
沒吃過豬肉,肯定見過豬跑!
Jquery Mobile
demo地址:
https://demos.jquerymobile.com/1.1.0/
教程地址:
https://www.codesocang.com/jquerymobile/jquerymobile/7/index.html
這個(gè)應(yīng)該是最簡單的,能夠快速上手了!
jQuery Mobile 還發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng) UI組件。支持全球主流的移動(dòng)平臺。
部件是功能豐富,有狀態(tài)的插件。隨著方法和事件,有一個(gè)完整的生命周期。
如果想5分鐘就能直接上手的,Jquery Mobile首當(dāng)其沖!
ColorUI
github地址:
https://github.com/weilanwl/ColorUI
官網(wǎng)地址:
https://www.color-ui.com/
鮮亮的高飽和色彩,專注視覺的小程序組件庫
ColorUI 是小程序組件庫,但不是純樣式庫。由于WeUI有些淡雅,可能不合某些時(shí)尚公司的風(fēng)格,因此 ColorUI 也有龐大的追捧者。
github上標(biāo)星高達(dá)8.8k
相信你肯定有用過使用ColorUI的小程序
如果要開發(fā)小程序,這款開源框架是一個(gè)不錯(cuò)的選擇。
Material
material design風(fēng)格的前端css框架
官方網(wǎng)站:
http://materializecss.com/
中文學(xué)習(xí)站:
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>可以使我們的頁面顏色更鮮艷,動(dòng)畫效果更突出(符合Material Design的設(shè)計(jì)風(fēng)格)
究竟什么是Material Design?
設(shè)計(jì)是創(chuàng)造的藝術(shù),我們的目標(biāo)就是要滿足不同的人類需要。人們的需要會(huì)隨著時(shí)間發(fā)展,我們的設(shè)計(jì),實(shí)踐,以及理念也要隨之提升。我們在自我挑戰(zhàn),為用戶創(chuàng)造了一個(gè)可視化語言,它整合了優(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)系、變化與過渡,配合虛擬世界的靈活特性,還原最貼近真實(shí)的體驗(yàn),達(dá)到簡潔與直觀的效果。
Layui
官網(wǎng)地址:
https://www.layui.com/
github地址:
https://github.com/sentsin/layui/
layui(諧音:類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。
其外在極簡,卻又不失飽滿的內(nèi)在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過精心雕琢,非常適合界面的快速開發(fā)。
layui 首個(gè)版本發(fā)布于2016年金秋,她區(qū)別于那些基于 MVVM 底層的 UI 框架,卻并非逆道而行,而是信奉返璞歸真之道。
準(zhǔn)確地說,她更多是為服務(wù)端程序員量身定做,你無需涉足各種前端工具的復(fù)雜配置,只需面對瀏覽器本身,讓一切你所需要的元素與交互,從這里信手拈來。
weui
github地址
https://github.com/weui/weui
同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫
WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫,為微信Web開發(fā)量身設(shè)計(jì),可以令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素
imagefrozenui
github地址
https://github.com/frozenui/frozenui
FrozenUI的CSS組件庫,基于騰訊手Q樣式規(guī)范。特點(diǎn)FrozenUI 是一套基于移動(dòng)端的UI庫,輕量、精美、遵從手機(jī) QQ 設(shè)計(jì)規(guī)范。
適用于使用手Q規(guī)范設(shè)計(jì)的Web頁面,而針對非手Q規(guī)范的頁面,可通過修改變量定制界面主題,并且可以按需選擇需要的組件。
使用iconfont展示圖標(biāo),包含了按鈕,列表,表單,提示,彈窗等常用組件,新增文本,布局,1px, rem,文字截?cái)?#xff0c;占位,兩端留白,兩端對齊等解決方案,同時(shí)解決了移動(dòng)端屏幕適配問題。
結(jié)語
當(dāng)然如果你覺得還有更容易上手的前端ui框架,評論告訴大家把!
往期推薦
怪不得同事的上網(wǎng)從沒廣告,原來一直偷偷安裝了這三款插件
爬蟲利器XPath Helper,高效解析網(wǎng)頁內(nèi)容
收藏級干貨:Chrome插件(擴(kuò)展)開發(fā)全攻略
推薦一個(gè)有趣的開源項(xiàng)目,藏著git快速入門的秘密!
開源神器:微信頭像卡通化,馬上520了,推薦嘗試!
總結(jié)
以上是生活随笔為你收集整理的后端程序员转行前端,强烈推荐这6个前端UI框架,第二款小程序UI框架颜值最高!...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Sql Server之旅——第十三站 深
- 下一篇: 微前端与项目实施方案研究