AdminLTE介绍与入门

最新推荐文章于 2024-10-07 08:32:19 发布

.NET跨平台

最新推荐文章于 2024-10-07 08:32:19 发布

阅读量2.2k

点赞数

原文链接：https://blog.csdn.net/WuLex

版权

AdminLTE2，AdminLTE3 UI框架专栏收录该内容

7 篇文章 4 订阅

订阅专栏

介绍

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具，它提供了一系列响应的、可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容PC和移动端。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站。AdminLTE框架在网页架构与设计上，有很大的辅助作用，尤其是前端架构设计师，用好AdminLTE不但美观，而且可以免去写很大CSS与JS的工作量。

`github`上获取`AdminLTE`

下载解压的目录如下：
在这里插入图片描述

她是基于FIS进行开发的，在目录结构中的assets、modules、pages、plugins都是前端开发时所用到的，最终发布的就是release。对于后端来讲，只需要关注release就可以了：
在这里插入图片描述

在release目录下有css、img、pages、plugins目录，前两者就是解决pages是产生的一些定制的页面，而plugins中是相关的插件。

查看pages中的页面
在这里插入图片描述
其中有两种文件，一种是以all开头的hhtml，一种不是，这两种文件的区别在于all开头的文件可以直接运行显示页面全部信息，而未以all开头的文件需要与其他文件进行组合来展示

基于使用入门

准备

1、打开HBuilder，选择新建—》Web项目----》adminLTFDemo
在这里插入图片描述

将项目的css、img、js、index.html全部删掉
在这里插入图片描述
AdminLTE资料\docafe-adminlte2-itcast-master\adminlte2-itcast\release\dist目录下的css、img、plugins目录复制到项目目录下：

编写页面

使用模板

创建pages/demo.html，然后想要什么效果就将原来pages下的页面复制到demo.html中修修改改就可以了
在这里插入图片描述

运行就可以看效果了
在这里插入图片描述

在这里插入图片描述

AdminLTF布局与皮肤

在这里插入图片描述

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文件

使用方法：

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

一. 自定义主题样式

（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中可以找到。

二. `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显示，如下图。
在这里插入图片描述

三. `main-sidebar`:左侧导航

在这里插入图片描述

四. `content`设置：放在`section`标签里。

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

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