AdminLTE的使用

框架介绍：AdminLTE是一个完全响应管理模板。基于Bootstrap3框架，易定制模板。适合多种屏幕分辨率，从小型移动设备到大型台式机。内置了多个页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。

### 完整版项目目录：

roncoo-AdminLTE/
├── dist/ 编译后的静态资源目录
│   ├── CSS/
│   ├── JS
│   ├── fonts
│   ├── img
├── build/ 编译前的源文件目录
│   ├── less/
│   │   ├── roncoo-AdminLTE's Less 文件
│   ├── fonts/
│   │   ├── roncoo-AdminLTE's 字体 文件
│   ├── js/
│   │   ├── roncoo-AdminLTE's javascript 文件
│   ├── img/
│   │   ├── roncoo-AdminLTE's image 文件
│   └── Bootstrap-less/ (bootstrap less，仅供参考，不做修改)
│       ├── mixins/
│       ├── variables.less
│       ├── mixins.less
└── plugins/
    ├── 所有的第三方插件的CSS和JS文件

使用方法：

  1. 根据项目需要选择引用整个页面工程
  2. ajax模式中所有js和css统一在index.html引入，不再分开页面引入。ajax模式中添加tab页功能，加载页面可以加载多个，通过头部tab切换，该功能只在ajax模式中存在。a标签通过添加属性target=navTab添加新开标签页功能，通过异步请求href连接页面，仅ajax模式可使用。
  3. 按照参数进行编写

          1】自定义主题样式

             （1）在body中设置class。

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

                        skin-blue：主题颜色，如果引入了_all-skins.min.css，有很多颜色可以选择，设置为skin-blue默认就为下一图的主题样式。将skin-后面blue换成下图二颜色名，主题色也跟着变化，具体地方在下图一登录头像旁换肤功能体现

​​

                 （2）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> 
                  </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显示，如下图。

             3】main-sidebar:左侧导航

      

               4】 content设置：放在section标签里。

​

    •   重点 如果是在ajax模式下：设置在app.js里。Ajax的布局模式，只需要在body标签里面添加`.ajax-template .fixed`类即可实现（ajax模式下需要注意所有元素不能有相同的id名，因为ajax模式下相当于把所有的内容加载到同一个页面，相同id会出问题，比如用bootstrap里的tab页，类似的相同函数名等等）

    •  

              最后，如果在ajax模式下，由于页面太多，比较复杂的情况下，类似与我做盛维的时候，记不得自己到底用过什么id名，最终大招：改写app.js里的ajax请求页面的源码，如下图：（大家在后期开发有问题时可以接着改，如果发现我的改写有问题的请轻轻喷(^_^)

     app.js的源码改写：

​

 

 

 

     

​

posted @ 2017-09-05 11:16  Geminiyu  阅读(36671)  评论(0)    收藏  举报