百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术流 > 正文

对后端非常友好的静态Bootstrap管理模板——LightYearAdmin

citgpt 2024-07-20 13:27 15 浏览 0 评论

介绍

光年后台管理模板(Light Year Admin)是一个基于Bootstrap v3.3.7的后台HTML模板。作为后端开发人员,自己在做一些简单系统时,经常为了后台的模板烦恼,因此今天向大家介绍一个对后端开发人员比较友好的管理模板,模板的作者本人也是一名开发人员,因此结合后端人员一些特点而开发的一套基于Bootstrap的管理模板,界面真的非常漂亮,而且功能也能满足大多数人需求!



Gitee坐标

https://gitee.com/yinqi/Light-Year-Admin-Template

对后端非常友好的静态Bootstrap管理模板——LightYearAdmin

https://gitee.com/yinqi/Light-Year-Admin-Using-Iframe

作者考虑到不同人群的开发习惯和方式,一共分为两半版本,一种是自带tab标签页的iframe版,另一种则是普通的页面版,可根据自己需要和业务需求选择不同的版本。

模板说明

  • 普通版

网站主题切换,有默认白色,黑色,和渐变蓝绿色的半透明三种。另外:logo、顶部和侧边栏可单独调整颜色(黑色和半透明主题时选择白色不变)。

增加主题切换,增加了很多css,如果你不需要有主题切换功能,可将多余的内容删除掉。



  • HTML页面中删除掉<!--切换主题配色-->之间的内容
  • js中删除 line 137 - line 146
  • css中删除 line 2937 - line 3946

主题切换并没有存到cookie中,大家根据自己实际情况,做cookie存储或者其他方式。


  • jquery-cookie保存设置示例
	// 读取cookie中的主题设置
	var the_logo_bg = $.cookie('the_logo_bg'),
	 the_header_bg = $.cookie('the_header_bg'),
	 the_sidebar_bg = $.cookie('the_sidebar_bg'),
	 the_site_theme = $.cookie('the_site_theme');
	console.log(the_logo_bg);
	if (the_logo_bg) $('body').attr('data-logobg', the_logo_bg);
	if (the_header_bg) $('body').attr('data-headerbg', the_header_bg);
	if (the_sidebar_bg) $('body').attr('data-sidebarbg', the_sidebar_bg);
	if (the_site_theme) $('body').attr('data-theme', the_site_theme);
	
	// 设置主题配色
	setTheme = function(input_name, data_name) {
	 $("input[name='"+input_name+"']").click(function(){
	 $('body').attr(data_name, $(this).val());
	 $.cookie('the_'+input_name, $(this).val());
	 });
	}
	setTheme('site_theme', 'data-theme');
	setTheme('logo_bg', 'data-logobg');
	setTheme('header_bg', 'data-headerbg');
	setTheme('sidebar_bg', 'data-sidebarbg');

  • iframe版

项目在Light Year Admin的基础上整理修改而来,用到了开源项目Bootstrap-Multitabs来实现多标签页,稍微做了一些修改。

  • 相对于Light Year Admin的项目,去掉了暗黑和半透明的两个主题
  • 所有需要的链接加上class="multitabs"
  • 因为插件做了一些修改,在顶部的下拉菜单(dropdown-menu)中,不要把链接写在href里面,放到data-url里
  • 插件用到了HTML5的会话存储,因此在修改了init里的默认地址后,可以再浏览器控制台执行下sessionStorage.clear(); // cache配置为true时

引用的第三方开源项目或者插件

普通版:

  • Bootstrap(去掉了自带的字体图标)
  • jQuery
  • bootstrap-colorpicker
  • bootstrap-datepicker
  • bootstrap-datetimepicker
  • ion-rangeslider
  • jquery-confirm
  • jquery-tags-input
  • bootstrap-notify
  • Chart.js
  • chosen.jquery.js
  • perfect-scrollbar

iframe版本:

  • Bootstrap(去掉了自带的字体图标)
  • JQuery
  • bootstrap-colorpicker
  • bootstrap-datepicker
  • bootstrap-datetimepicker
  • ion-rangeslider
  • jquery-confirm
  • jquery-tags-input
  • bootstrap-notify
  • Chart.js
  • chosen.jquery.js
  • perfect-scrollbar
  • Bootstrap-Multitabs

模板截图

一共有两个版本,这里我们选择带有tab的iframe版本的进行截图演示:













以上是部分页面的截图,已经包括了很多功能在里面,包括列表、表单、分步表单、主体配色、多级菜单、模态框、确认框、提示、登录、404等!另附两张普通版中的暗色系以及彩色系主题:




总结

LightYearAdmin管理模板对后端人员可以说非常的友好了,笔者认为从配色、样式、布局、操作等方面都非常友好,如果你正好缺一款属于适合的模板,不妨试试看!

PS:相关文件在Gitee上都可以下载,这是纯静态模板,适合任何后端语言进行配合开发!大家也可以多多支持模板作者!谢谢!

相关推荐

js中arguments详解

一、简介了解arguments这个对象之前先来认识一下javascript的一些功能:其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载。Javascrip中每个函数...

firewall-cmd 常用命令

目录firewalldzone说明firewallzone内容说明firewall-cmd常用参数firewall-cmd常用命令常用命令 回到顶部firewalldzone...

epel-release 是什么

EPEL-release(ExtraPackagesforEnterpriseLinux)是一个软件仓库,它为企业级Linux发行版(如CentOS、RHEL等)提供额外的软件包。以下是关于E...

FullGC详解  什么是 JVM 的 GC
FullGC详解 什么是 JVM 的 GC

前言:背景:一、什么是JVM的GC?JVM(JavaVirtualMachine)。JVM是Java程序的虚拟机,是一种实现Java语言的解...

2024-10-26 08:50 citgpt

使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
  • 使用Spire.Doc组件利用模板导出Word文档
跨域(CrossOrigin)

1.介绍  1)跨域问题:跨域问题是在网络中,当一个网络的运行脚本(通常时JavaScript)试图访问另一个网络的资源时,如果这两个网络的端口、协议和域名不一致时就会出现跨域问题。    通俗讲...

微服务架构和分布式架构的区别

1、含义不同微服务架构:微服务架构风格是一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中,服务间通信采用轻量级通信机制(通常用HTTP资源API)。这些服务围绕业务能力构建并...

深入理解与应用CSS clip-path 属性
深入理解与应用CSS clip-path 属性

clip-pathclip-path是什么clip-path 是一个CSS属性,允许开发者创建一个剪切区域,从而决定元素的哪些部分可见,哪些部分会被隐...

2024-10-25 11:51 citgpt

HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
  • HCNP Routing&Switching之OSPF LSA类型(二)
Redis和Memcached的区别详解
  • Redis和Memcached的区别详解
  • Redis和Memcached的区别详解
  • Redis和Memcached的区别详解
  • Redis和Memcached的区别详解
Request.ServerVariables 大全

Request.ServerVariables("Url")返回服务器地址Request.ServerVariables("Path_Info")客户端提供的路...

python操作Kafka

目录一、python操作kafka1.python使用kafka生产者2.python使用kafka消费者3.使用docker中的kafka二、python操作kafka细...

Runtime.getRuntime().exec详解

Runtime.getRuntime().exec详解概述Runtime.getRuntime().exec用于调用外部可执行程序或系统命令,并重定向外部程序的标准输入、标准输出和标准错误到缓冲池。...

promise.all详解 promise.all是干什么的
promise.all详解 promise.all是干什么的

promise.all详解promise.all中所有的请求成功了,走.then(),在.then()中能得到一个数组,数组中是每个请求resolve抛出的结果...

2024-10-24 16:21 citgpt

Content-Length和Transfer-Encoding详解
  • Content-Length和Transfer-Encoding详解
  • Content-Length和Transfer-Encoding详解
  • Content-Length和Transfer-Encoding详解
  • Content-Length和Transfer-Encoding详解

取消回复欢迎 发表评论: