官方文档link
1.AdminLTE的必要配置文件
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx}/assets/font/Hui-iconfont/1.0.7/iconfont.css">
<!-- Theme style -->
<link rel="stylesheet" href="${ctx}/assets/css/AdminLTE.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="${ctx}/assets/css/skins/_all-skins.min.css">

 <script type="text/javascript" src="${ctx}/assets/plugins/h-ui/js/H-ui.admin.js"></script>
 <!-- AdminLTE App -->
 <script src="${ctx}/assets/js/app-LTE.min.js"></script>

2.自定义主题样式

(1)在body中设置class。

<body class="hold-transition skin-blue sidebar-mini">

skin-blue:主题颜色,如果引入了_all-skins.min.css,有很多颜色可以选择,如左图,设置为skin-blue默认就为右图的主题样式。

        

sidebar-mini:在AdminLTE.css中可以找到。

   

(2)wrapper设置: AdminLTE.css

<div class="wrapper">

<header class="main-header"></header>

<aside class="main-sidebar"></aside>

<section class="content-wrapper"></section>

</div>

header设置:放在header标签里。


<!- - Logo - ->

<a href="index2.html" class="logo">

<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini">

<img alt="" src="${ctx}/assets/img/logo.png" width="40px" height="40px">
</span>
<span class="logo-lg">xxx后台管理系统</span>
</a>
<!- - Header Navbar - ->

<nav
class="navbar navbar-static-top" role="navigation">

<!-- Sidebar toggle button-->

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">

<span class="sr-only">Toggle navigation</span>

</a>

<!-- Navbar Right Menu -->

<div class="navbar-custom-menu">

<ul class="nav navbar-nav">

<!-- User Account: -->

<li class="dropdown user user-menu">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

<img src="${ctx}/assets/img/user.png" class="user-image" alt="User Image">

<span class="hidden-xs">${user.name}</span>

</a>

<ul class="dropdown-menu">

<!-- User image -->

<li class="user-header">

<img id="user-header" src="${ctx}/assets/img/user.png" class="img-circle" alt="User Image">

<p>${user.name}</p>

</li>

<!--Menu Body-->

<li class="user-body">

<div class="col-xs-4 text-center">

<a href="#">Followers</a>

</div>

<div class="col-xs-4 text-center">

<a href="#">Sales</a>

</div>

<div class="col-xs-4 text-center">

<a href="#">Friends</a&gt
;
</div>

</li>

<!-- Menu Footer-->

<li class="user-footer">

<div class="pull-left">

<a id="systemsettingBtn" href="javascript:void(0)" class="btn btn-default btn-flat">修改密码</a>

</div>

<div class="pull-right">

<a href="${ctx}${apath}/logout" class="btn btn-default btn-flat">注销</a>

</div>

</li>

</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar">
<i class="fa fa-gears"></i>
</a>
</li>
</ul>
</div>
</nav>

  header效果如下图所示,点击sidebar toggle button,logo-lg隐藏,logo-mini显示,如右图。

    

aside设置:放在aside标签里。

<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">

<section class="sidebar">

<!-- search form -->

<form action="#" method="get" class="sidebar-form">

<div class="input-group">

<input type="text" name="q" class="form-control" placeholder="搜索...">
   &lt;span class="input-group-btn"&gt;</br>
&lt;button type="submit" name="search" id="search-btn" class="btn btn-flat"&gt;</br>
&lt;i class="fa fa-search"&gt;&lt;/i&gt;</br>
&lt;/button&gt;</br>
&lt;/span&gt;</br>
&lt;/div&gt;</br>

</form>

<!-- sidebar menu: : style can be found in sidebar.less -->

<ul class="sidebar-menu">


</ul>


<script id="left-sidebarTmp" type="text/html">


<li class="header ad-click">导航</li>


<li class="active treeview">


<a _href="${ctx}${apath}/dashboard" href="javascript:void(0)" data-title="首页">


<i class="fa fa-dashboard"></i><span>首页</span><i class="fa fa-angle-left pull-right"></i>


</a>


</li>


{{each sub1 as value i}} //sub1 对应js代码中的 sub1 .

<li class="treeview">


<a {{if value.url}}_href="{{value.url}}"{{/if}} href="javascript:void(0)" data-title="{{value.name}}">


<i class="fa {{value.ico}}"></i><span>{{value.name}}</span><i class="fa fa-angle-left pull-right"></i>


</a>


<ul class="treeview-menu">


{{
each value.sub as value1 i1}} //对应 rootList[i].sub


<li>


<a {{if value1.url}}_href="{{value1.url}}"{{/if}} href="javascript:void(0)" data-title="{{value1.name}}">


<i class="fa {{value1.ico}}"></i>{{value1.name}}


</a>


</li>


{{/each}}


</ul>


</li>


{{/each}}


</script>


</section>


</aside>

<script>
function sloveSliderData (list, pid){

var retList = [ ];

var len = list.length;

if (len > 0)

{

for (var i = 0; i < len; i++)

{

var x = list[i];

if (x.pid == pid)

{

var node = {};

node.name = x.name;

if (x.url == undefined || x.url == null || x.url == "")

{

node.url = null;

}

else

{

node.url = "${ctx}${apath}/page/" + x.url;

}

node.ico = x.ico;

node.pid = x.pid;

node.id = x.id;

retList.push (node);

}

else

{

}

}

}

return retList;

}

$.HTTP.list (

{

url : "${ctx}${apath}/permission/list",

success : function (list, pageinfo) {

var rootList = [ ];

rootList = sloveSliderData (list, 0); //根据根菜单的pid为0,挑选出根菜单

if (list.length > 0)

{

for (var i = 0; i < rootList.length; i++)

{

rootList[i].sub = sloveSliderData (list, rootList[i].id); //根据pid为0挑选出的根菜单的id,作为子菜单的pid

}

}

//组装数据源

var sidebardata =

{

sub1 : rootList

};

console.log(sidebardata);

//渲染菜单数据

var dt = template("left-sidebarTmp", sidebardata); //artTemplate方法

$("#left-sidebar").html(dt);

}

});

</script>

注意:


${ctx}${apath}/permission/list接口的数据在数据库中手动添加,java后台有代码将数据存入这个接口。数据库字段与js代码所需的字段对应一致。

1
<span style="font-size: 14pt; font-family: 幼圆"><img src="https://images2015.cnblogs.com/blog/1019802/201610/1019802-20161028133415968-1857840470.png" alt=""></span>

经过js处理过的sidebardata:



成功后sidebar显示如下图所示:


 

 content设置:放在section标签里。

<!- - content - ->

<section class="content-wrapper">

<div id="Hui-tabNav" class="Hui-tabNav ">

<div class="Hui-tabNav-wp">

<ul id="min_title_list" class="acrossTab cl" style="padding-left: 6px;">

<li class="active">

<span title="首页" data-href="${ctx}${apath}/dashboard">首页</span><em></em>

</li>

</ul>

</div>

</div>

<div
id="iframe_box" class="Hui-article">

<div class="show_iframe">

<div style="display: none" class="loading"></div>

<iframe scrolling="yes" frameborder="0" src="${ctx}${apath}/dashboard"></iframe>

</div>

</div>

</section>

 点击sidebar的链接,对应的页面都会在iframe_box中显示出来。

AdminLTE的使用(转)的更多相关文章

  1. Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  2. 用C#从数据库动态生成AdminLTE菜单的一种方法

    当前的应用设计风格趋于Flat扁平化,很多基于BootStrap实现了很多UI非常漂亮的管理界面(Bootstrap admin template). 此核心文件开源在Github:https://g ...

  3. AdminLTE 2 开源模版

    AdminLTE  2 开源模版: 1. 文档  https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html 2. 代码   ...

  4. adminLTE的自动化菜单

    一. model from django.db import models # Create your models here. class MenuInfo(models.Model): paren ...

  5. Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template

    原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...

  6. 在Laravel5.* 中使用 AdminLTE

    在Laravel5.* 中使用 AdminLTE AdminLTE是一个很棒的单纯的由 HTML 和 CSS 构建的后台模板,在这片文章中,我将讲述如何将 AdminLTE 和 Laravel 优雅的 ...

  7. AdminLTE

    AdminLTE搭建前端   0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp ...

  8. 基于Bootstrap 3.x的免费高级管理控制面板主题:AdminLTE

    AdminLTE 是一个基于Bootstrap 3.x的免费高级管理控制面板主题.AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小型移动设 ...

  9. AdminLTE的使用

    1.AdminLTE的必要配置文件<!-- Tell the browser to be responsive to screen width --> <meta content=& ...

  10. ABP+AdminLTE+Bootstrap Table权限管理系统一期

       学而时习之,不亦说乎,温顾温知新,可以为师矣. 这也是算是一种学习的方法和态度吧,经常去学习和总结,在博客园看了很多大神的文章,写下一点对于ABP(ABP是“ASP.NET Boilerplat ...

随机推荐

  1. 洛谷P2818 天使的起誓

    题目描述 Tenshi非常幸运地被选为掌管智慧之匙的天使.在正式任职之前,她必须和其他新当选的天使一样要宣誓.宣誓仪式是每位天使各自表述自己的使命,他们的发言稿放在n个呈圆形排列的宝盒中.这些宝盒按顺 ...

  2. Oracle定义变量、常量

    1 定义变量 declare var_countryname varchar2(50):='中国'; 2 定义常量 con_day constant integer:=365;

  3. ElasticSearch 5.2.2 安装及 head 插件的安装

    ElasticSearch 是一个基于 Lucene 的高度可扩展的开源全文搜索和分析引擎.它能够做到可以快速.实时地存储.搜索和分析大量数据.它通常作为底层引擎/技术,为具有复杂搜索功能和要求的应用 ...

  4. 4个开源的Gmail替代品

    资料来源 https://opensource.com/alternatives/gmail 本文是对原文翻译,在调试 privmx 时么有成功,这些代码大多用于 php5 ,对PHP7 不兼容. 相 ...

  5. Qt之输出控制

    简述 在Qt项目开发过程中,往往需要对程序的一些信息进行控制,比如:打印日志.调试信息等,便于我们后期查找.跟踪及定位问题. 下面,我们来分享下常用的几种方式. 简述 示例代码 应用程序输出 控制台输 ...

  6. Java Base64、HMAC、SHA1、MD5、AES DES 3DES加密算法

    ●  BASE64 严格地说,属于编码格式,而非加密算法    ●  MD5(Message Digest algorithm 5,信息摘要算法)    ●  SHA(Secure Hash Algo ...

  7. material风格前端CSS框架——Materialize

    官方网站:http://materializecss.com/(有中文,翻译不全) 中文学习站:http://www.materializecss.cn/(翻译较全)

  8. CISP/CISA 每日一题

    CISA 业务流程控制鉴证中要考虑的特定因素: 1.流程图 2.流程控制 3.在流程中评估业务风险 4.对最佳实践进行标杆管理 5.角色与责任 6.活动与任务 7.数据限制   信息系统审计师的任务是 ...

  9. 【Codeforces Round #452 (Div. 2) D】Shovel Sale

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让N乘2->a 然后看一下位数是多少. 假设有x位(x>=2) 则(0..(a%10-1) ) + (99..9)[x- ...

  10. SpringMVC 传递相同名称的参数的最佳方法

    华为云4核8G,高性能云服务器,免费试用 >>>   SpringMVC 多个对象的相同字段参数传递解决方案,在SpringMVC中,有时需要传递多个对象(除了Model和web元素 ...