官方文档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. android图像处理系列之五－－ 给图片添加边框（中）

    前面一篇讲到给图片加边框的方式,只能给图片加一些有规则的边框,如果想加一些比较精美的效果,就有点麻烦了.下面就给出解决这个问题的思路. 思路是:一些比较精美的花边图片我们是很难用代码控制,就目前本人水 ...

  2. vue ---- 实现手机端（左滑 删除。右划 正常）

    touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系 ...

  3. Dubbo springcloud

    简而言之,Dubbo确实类似于Spring Cloud的一个子集,Dubbo功能和文档完善,在国内有很多的成熟用户,然而鉴于Dubbo的社区现状(曾经长期停止维护,2017年7月31日团队又宣布重点维 ...

  4. java（面向对象 ）

    java面向对象的语言 对象:真实存在唯一的事物. 类:实际就是对某种类型事物的共性属性与行为的抽取. 面向对象的计算机语言核心思想: 找适合的对象做适合的事情. 如何找适合的对象: 1.sun已经定 ...

  5. python django的单元测试

    # TestCase 基类的使用 django.test.TestCase # 测试依赖于数据库访问,创建或查询模型 unittest.TestCase #没有与数据库交互 避免刷新数据库的成本

  6. flask_wtf flask 的 CSRF 源代码初研究

    因为要搞一个基于flask的前后端分离的个人网站,所以需要研究下flask的csrf防护原理. 用的扩展是flask_wtf,也算是比较官方的扩展库了. 先上相关源代码: def validate_c ...

  7. zookeeper提供了什么

    简单的说,zookeeper=文件系统+通知机制. 每个子目录项如 NameService 都被称作为 znode,和文件系统一样,我们能够自由的增加.删除znode,在一个znode下增加.删除子z ...

  8. POJ 1426 Find The Multiple （DFS / BFS）

    题目链接:id=1426">Find The Multiple 解析:直接从前往后搜.设当前数为k用long long保存,则下一个数不是k*10就是k*10+1 AC代码: /* D ...

  9. 杭电（hdu）2053 Switch Game 水题

    Switch Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  10. elasticsearch java 客户端之Client简介

    elasticsearch通过构造一个client对外提供了一套丰富的java调用接口.总体来说client分为两类cluster信息方面的client及数据(index)方面的client.这两个大 ...