頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

基于 Bootstrap v3.3.7 的后臺管理模板 Light Year Admin

光年(Light Year Admin)后臺管理系統模板是一個基于Bootstrap v3.3.7的純HTML模板。

作為后端開發人員,自己在做一些簡單系統時,經常為了后臺的模板煩惱,國內的少,也不太喜歡tab形式的;國外的又太復雜;vue什么框架的又不會用,因而想自己整理出來一個簡單點的通用后臺模板,結合自己的使用和國外模板的配色、細節處理,這就有了光年后臺模板。

簡潔而清新的后臺模板,功能雖少,倒也滿足簡單的后臺功能,也能夠快速上手,希望大家支持。

說明

網站主題切換,有默認白色,黑色,和漸變藍綠色的半透明三種。另外: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');

由jquery讀取設置,可能會受到加載速度的影響

特別感謝

  • Bootstrap(去掉了自帶的字體圖標)
  • JQuery
  • bootstrap-colorpicker
  • bootstrap-datepicker
  • bootstrap-datetimepicker
  • ion-rangeslider
  • jquery-confirm
  • jquery-tags-input
  • bootstrap-notify
  • Chart.js
  • chosen.jquery.js
  • perfect-scrollbar

更新記錄

2019.08.04 修改樣式bug

2019.05.13 略微調整單選框和復選框的樣式

2019.04.24 新增文檔示例頁面增加多圖上傳樣式(只有樣式),調整標簽插件樣式和js的默認提示

2019.04.21 新增步驟條和向導插件,修改消息方法(新增自定義消失時間),增加錯誤頁面,增加通知消息頁面說明,調整設置頁樣式

2019.03.31 新增暗黑、半透明 兩種主題樣,所有頁面都增加切換html

2019.03.30 修正bootstrap-datetimepicker圖標bug,調整一些樣式

2019.03.28 新增主題配色切換

  • 顏色切換,主要針對logo,頂部,側邊欄
  • 目前只在首頁頁面增加切換,并且未將設置存儲到cookie

2019.03.25 微調單選框和復選框禁用下的顏色

2019.03.22 調整側邊欄隱藏/顯示操作,開關改為一直可見,側邊欄自動隱藏臨界值調整為1024px

2019.03.21 新增多級菜單,調整側邊欄一些樣式(多級菜單的滾動條位置還需要觀察)

2019.03.19 調整logo,修復滾動條bug

相關鏈接

發表評論

腾讯彩票兑奖