后端程序员转行前端,强烈推荐这6个前端UI框架,第二款小程序UI框架颜值最高!...

昨天有个同事问我有没有可以直接上手的前端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了,推荐尝试!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309415.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二分+最大化最小值 River Hopscotch POJ - 3258

题意&#xff1a; 起始有两个石头&#xff0c;位置是000和nnn,在这中间有n个石头&#xff0c;问如何拿走m块石头后&#xff0c;使得他们之间的最小间隔的最大值。 题目&#xff1a; Every year the cows hold an event featuring a peculiar version of hopscotch that invo…

[JavaWeb-JavaScript]JavaScript概念与功能

JavaScript&#xff1a; * 概念&#xff1a; 一门客户端脚本语言* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎* 脚本语言&#xff1a;不需要编译&#xff0c;直接就可以被浏览器解析执行了* 功能&#xff1a;* 可以来增强用户和html页面的交互过程&#x…

Kubernetes引发“军备赛”,K8s真是企业生存的关键吗

导语与许多其他国家一样&#xff0c;英国对云基础架构的需求空前增长。随着学校&#xff0c;办公室&#xff0c;商店和饭店的关闭以应对疫情&#xff0c;云驱动的应用程序应运而生&#xff0c;解决挑战并提供安慰。随着各个年龄段人群的屏幕时间激增&#xff0c;数据中心正努力…

Markdown编译器插入公式的数学符号及字体颜色、背景

文章目录目录插入公式的数学符号Markdown字体颜色、背景markdown表格设置目录 [TOC](目录)[TOC](目录)[TOC](目录) 可以直接生成目录 插入公式的数学符号 可以直接复制用&#xff0c;可以用插入代码&#xff0c;但前后都需加上一个绝对引用符号&#xff08;$) 符号代码xax_{…

[JavaWeb-JavaScript]JavaScript与html结合方式

与html结合方式 1. 内部JS&#xff1a;* 定义<script>&#xff0c;标签体内容就是js代码2. 外部JS&#xff1a;* 定义<script>&#xff0c;通过src属性引入外部的js文件* 注意&#xff1a;1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行…

【新插件发布】AzureAD运维Excel版插件,增删改查快10倍c以上!

在笔者的BI项目开发中&#xff0c;用到了Azure的AzureSQL和AzureAS分析服务&#xff0c;此两大服务&#xff0c;可和AzureAD帐号体系打通。而AzureAD帐号&#xff0c;在其免费功能基础功能上&#xff0c;是免费使用的&#xff0c;随着项目开发上线进入运维阶段&#xff0c;Azur…

数论相关

目录符号整除/同余理论常见符号数论函数常见符号其他常见符号位运算与、或、异或取反左移和右移复合赋值位运算符关于优先级位运算的应用有关 2 的幂的应用取绝对值取两个数的最大/最小值操作一个数的二进制位模拟集合操作快速幂模意义下大整数乘法快速乘高精度快速幂欧拉降幂求…

[JavaWeb-JavaScript]JavaScript注释数据类型

注释 1. 单行注释&#xff1a;//注释内容2. 多行注释&#xff1a;/*注释内容*/数据类型&#xff1a; 1. 原始数据类型(基本数据类型)&#xff1a;1. number&#xff1a;数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)2. string&#xff1a;字符串。 字符串 "…

博客系统知多少:揭秘那些不为人知的学问(二)

点击上方关注“汪宇杰博客”上篇《博客系统知多少&#xff1a;揭秘那些不为人知的学问&#xff08;一&#xff09;》介绍了博客的历史、我的博客故事及博客的受众来源。本篇精彩继续&#xff0c;介绍博客基本功能设计要点。1.“博客”的前世今生2.我的博客故事3.谁是博客的受众…

二分+01分数规划+最大化平均值 Dropping tests POJ - 2976

题意&#xff1a; 给你若n个分数&#xff0c;分子a[i]a[i]a[i],分母b[i]b[i]b[i],使满足公式100⋅∑i1nai∑i1nbi100\cdot\tfrac{\sum_{i1}^{n} a_{i}}{\sum_{i1}^{n} b_{i}}100⋅∑i1n​bi​∑i1n​ai​​&#xff0c;求任意去掉k个分数后&#xff0c;公式结果最大值。 题目…

[JavaWeb-JavaScript]JavaScript变量

变量 * 变量&#xff1a;一小块存储数据的内存空间* Java语言是强类型语言&#xff0c;而JavaScript是弱类型语言。* 强类型&#xff1a;在开辟变量存储空间时&#xff0c;定义了空间将来存储的数据的数据类型。只能存储固定类型的数据* 弱类型&#xff1a;在开辟变量存储空间时…

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(四)

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…

莫比乌斯反演/容斥 +2020ICPC 江西省大学生程序设计竞赛 A Simple Math Problem

题目描述 输入描述: 输出描述: 示例1 输入 3 输出 5 分析&#xff1a; 1.这个题其实考的是一个莫比乌斯反演题&#xff0c;但是由于我知识储备不够&#xff0c;没有看出来&#xff0c;题目给的范围可以瞎搞一下&#xff0c;所以下面容斥可以过。 2.转换一下就是一道经典的…

猎鹰与龙飞船基于Linux,采用C++、Chromium与JS开发

最近两天科技界最重大的事件莫过于马斯克的 SpaceX 成功实现了猎鹰 9 号&#xff08;Falcon 9&#xff09;带着龙飞船&#xff08;Crew Dragon&#xff09;成功发射&#xff0c;并使飞船与国际空间站对接&#xff0c;将 NASA 两名宇航员送上了轨道前哨。背后关于 Falcon 9 与 C…

[JavaWeb-JavaScript]JavaScript运算符

运算符 1. 一元运算符&#xff1a;只有一个运算数的运算符&#xff0c;-- &#xff0c; (正号) * --: 自增(自减)* (--) 在前&#xff0c;先自增(自减)&#xff0c;再运算* (--) 在后&#xff0c;先运算&#xff0c;再自增(自减)va* (-)&#xff1a;正负号* 注意&#xff1a;…

java编码给出二维数组List<List<Integer>>matrix,输出每列最小的值

import java.util.LinkedList; import java.util.List;public class Main {public static void main(String[] args){/** a 是一个链表 &#xff0c;链表里面存放的对象是List<Integer>a* temp 是 List<Integer>* */List<List<Integer>> a new Linked…

博客系统知多少:揭秘那些不为人知的学问(四)

点击上方关注“汪宇杰博客” ^_^上篇《博客系统知多少&#xff1a;揭秘那些不为人知的学问&#xff08;三&#xff09;》介绍了博客协议或标准。本篇终章介绍设计博客系统有哪些知识点。1.“博客”的前世今生2.我的博客故事3.谁是博客的受众&#xff1f;4. 博客基本功能设计要点…

[JavaWeb-JavaScript]JavaScript特殊语法

JS特殊语法&#xff1a; 1. 语句以;结尾&#xff0c;如果一行只有一条语句则 ;可以省略 (不建议)2. 变量的定义使用var关键字&#xff0c;也可以不使用* 用&#xff1a; 定义的变量是局部变量* 不用&#xff1a;定义的变量是全局变量(不建议)

动态规划专题

目录动态规划基础钢条切割矩阵链乘法动态规划原理最优子结构经典问题&#xff1a;子问题重叠重构最优解最长公共子序列最优二叉搜索树最长连续不下降子序列最长不下降子序列经典问题&#xff08;来自习题&#xff09;DAG 中的最长简单路径最长回文子序列最长回文子串记忆化搜索…

Azure 国际版与中国版服务列表对(2020年6月版)

点击上方关注“汪宇杰博客” ^_^对于选择Azure平台的用户来说&#xff0c;会面临选择国内还是国际版的问题。由于一些原因&#xff0c;由世纪互联运营的中国大陆版Azure无法落地所有的国际版服务。相比几年前&#xff0c;情况已经有了一定的改善。本文列出了国际版和国内版Azur…