、AdminLTE:(开源免费)
https://adminlte.io/
最好的开源管理仪表板&控制面板的主题。基于Bootstrap3,AdminLTE提供了一系列的反应,可重复使用,常用的组件。是一个完全的响应式管理模板,适合从小型移动设备到大型台式机的屏幕分辨率。这是一款国外非常优秀的后台模板,同时有很多基于AdminLTE的模板,如roncoo-adminLTE、FastAdmin 等。
大分辨率设备
移动端设备
2、H+:(收费)
http://www.zi-han.net/theme/hplus/
H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,集成了很多功能强大的jQuery插件。
大分辨率设备
移动端设备
3、ng2-admin:(开源免费)
https://github.com/akveo/ng2-admin
一种基于Angular 2管理面板的模板,Bootstrap 4和WebPACK。它是利用一种结合TypeScript建立HTML和JavaScript,CSS,和它精美的设计。它包括视觉元素如饼图,地图,日历,待办事项,用户订阅,WYSIWYG编辑器和更酷的东西。
大分辨率设备
移动端设备
4、Ace Admin:(开源)
https://github.com/bopoda/ace
非常不错的轻量级易用的admin后台管理系统,基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求,而且能根据不同设备适配显示,而且还有四个主题可以切换。
大分辨率设备
移动端设备
5、CoreUI:(开源免费)
https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template
coreui是UX的游戏规则。纯净透明的代码没有冗余部件,所以应用程序是足够轻,提供极致的用户体验。这意味着在移动设备、台式机或笔记本电脑上,导航一样简单和直观。CoreUI基于Bootstrap 4,有HTML5 AJAX, HTML5 Static, AngularJS, Angular 2+, React.js 和 Vue.js共6个版本。
大分辨率设备
移动端设备
先介绍到这里,以上均为响应式模板,github开源社区上还有很多优秀的模板,就不一一介绍了,大家可以上github官网搜索需要的,上面有很多优秀的项目,如果你是开发者,强烈建议上去看看,会对你有所帮助。
在当今快速迭代的Web开发领域,构建可维护、可扩展且适应性强的用户界面成为了每个前端工程师面临的挑战。随着项目规模的扩大和团队成员的增加,如何确保代码的一致性、提升组件的重用率,以及加快新成员的融入速度,成为提升开发效率的关键因素。正是在这样的背景下,BEM(Block Element Modifier)这一革命性的前端开发方法论应运而生。
BEM(Block Element Modifier)是一种前端开发中用于组织CSS类名的命名约定,由Yandex公司提出。该方法论旨在提高代码的可维护性、可扩展性和团队协作效率,尤其适用于大型项目和组件化开发。BEM的核心理念围绕着三个基本概念展开:
这一模块是抖音应用中的常用功能(function),所以我们可以命名为dy-fc
总体布局可以分为上下两部分,我们可以将顶部模块当成头部命名为dy-fc__hd
而下面的各个功能的模块我们当作身体命名为dy-fc__bd
将顶部模块中的标题模块命名为dy-fc__title
将下面每个功能模块命名为dy-fc__item
<div class="dy-fc">
<div class="dy-fc__hd">
<span class="dy-fc__title">常用功能</span>
</div>
<div class="dy-fc__bd">
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">我的钱包</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">券包</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">小程序</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">观看历史</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">内容偏好</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">离线模式</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">设置</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">稍后再看</p>
</a>
</div>
</div>
首先重置默认样式
* {
margin: 0;
padding: 0;
}
接着我们给整个界面设为暗白色,初始化<a>标签
body {
background-color: rgba(211, 209, 209, 0.25);
}
a{
text-decoration: none;
}
然后我们设置一下整个模块的样式:
设置宽占比为94%,
设置外边距为10px并居中
将背景颜色设为白色
调整边角弧度
.dy-fc {
width: 94%;
margin: 10px auto;
background-color: #fff;
border-radius: 10px;
}
再然后是设置头部模块和标题
.dy-fc__hd {
padding: 10px;
}
.dy-fc__title {
font-size: 18px;
font-weight: bold;
}
继续是身体模块
我们将其设置为弹性容器并定义换行属性,使容器内的元素能够按行或列排列,并且可以自动换行、自动调整元素的位置和大小。它使得布局更加灵活和方便。
.dy-fc__bd {
padding: 10px;
display: flex;
flex-wrap: wrap;
}
随后是各个功能模块,我们将宽度设置为33%,使得三个为一行
.dy-fc__item {
width:33%;
text-align: center;
line-height: 2.1em;
color: black;
padding-bottom: 10px;
}
再然后就是图片和底部文字的样式啦
img {
width: 30px;
height: 30px;
}
.dy__desc {
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
}
在实际应用中,可以根据项目规模和需求灵活调整BEM的严格程度,例如引入简写规则或使用工具自动处理类名生成。 结合现代前端框架和工具(如Vue、React的CSS Modules或SASS的嵌套规则)可以进一步简化BEM的编写过程,同时保持其核心优点。
BEM不仅仅是一种命名方式,更是一种思维方式,它帮助开发者从模块化和可维护性的角度去设计和构建界面,是现代前端开发不可或缺的一部分。
是比较全的合集,送给大家,资源获取在文末(有惊喜哦),这次福利很大,赶快关注哦(资源限时开放....)!
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
大家有机会多支持闲心。。。。
不过后台UI是要授权的哦
DWZ富客户端框架(jQuery RIA framework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。
比较成熟,应用比较广泛,官网有整合的应用可以借鉴
B-JUI客户端框架(Best jQuery UI),是基于Bootstrap样式及jQuery库实现的Ajax RIA开源框架。
B-JUI客户端框架扩展方便、简单易用,很多情况下只要熟悉HTML语法,使用HTML属性就可以轻松用Ajax开发项目。对于javascript不太熟悉的程序员是非常方便的,他们只需要关注后端业务逻辑的实现就行了,前端页面上只需要简单的写点HTML代码。
本框架基于Bootstrap前端样式及jQuery库开发,提供丰富的各类组件及UI,封装有多种组件,及相关的Ajax请求调用,并且都以jQuery标准插件的方式组合在一起,所以非常方便进行二次开发或再扩展。
兼容性:
H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.4),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,以做出更强系统。
提醒:是收费的
H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版 采用源生html语言,完全免费,简单灵活,兼容性好 让您快速搭建中小型网站后台,拿来即用。
jQuery MiniUI - 专业WebUI控件库。
它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。
jQuery MiniUI致力降低企业应用的开发成本,丰富的UI控件、高度的稳定性、强大的扩展能力和平滑的版本升级能力,可满足大部分业务场景需求。
缺点:收费的!
请输入描述
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
b-jui的作者基于easyui开的的,比easy调用简单,很不错的UI,可惜收费,不过不算太贵
TopJUI基于最新版EasyUI构建,在使用TopJUI的过程中,除了可以使用TopJUI提供的组件功能外,你还可以根据实际情况调用EasyUI的原生组件功能,满足各种复杂的业务功能需求开发
Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。
组件丰富,模块化Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。
不过这个模板现成的东西比较少,复杂功能还需要自己去完善
Win10-UI是一款win10风格的后台UI框架。它使用了丰富的win10桌面元素,包括桌面图标、窗口化子页面管理、开始菜单、动态小磁贴等组件,兼容主流现代浏览器及移动端的屏幕尺寸,适合快速开发后台管理系统的前端界面。
风格不一样,还是挺不错的
Ace Admin,Metronic等等
今天小编就分享到这里
如果你是初级程序员可以研究别人的代码提高技术,如果你喜欢搞网盟或者外包,可以让你快速建站,还等什么赶快关注吧,我们会持续输出相关资源
资源来自互联网 仅供学习研究之用,不得用于商业,请在24小时内删除!
版权归原作者及其公司所有,如果你喜欢,请购买正版。
*请认真填写需求信息,我们会在24小时内与您取得联系。