AdminLTE介绍与入门

素颜马尾好姑娘i 2021-07-04 19:19 608阅读 0赞

## 介绍 ##

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

## `github`上获取`AdminLTE` ##

下载解压的目录如下：  
![在这里插入图片描述][20201104231127970.png]

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

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

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

## 基于使用入门 ##

### 准备 ###

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

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

## 编写页面 ##

### 使用模板 ###

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

运行就可以看效果了  
![在这里插入图片描述][20201104231636572.png]

![在这里插入图片描述][2020110423165159.png]

### AdminLTF布局与皮肤 ###

![在这里插入图片描述][20201104231731689.png]  
![在这里插入图片描述][20201104231752645.png]  
![在这里插入图片描述][20201104231809827.png]  
![在这里插入图片描述][20201104231818530.png]

--------------------

## 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）在`body`中设置`class`。

`skin-blue`：主题颜色，如果引入了`_all-skins.min.css`，有很多颜色可以选择，设置为`skin-blue`默认就为下一图的主题样式。将`skin-`后面`blue`换成下图二颜色名，主题色也跟着变化，具体地方在下图一登录头像旁换肤功能体现  
![在这里插入图片描述][20201104232743214.png]  
![在这里插入图片描述][20201104232755715.png]  
（2）`sidebar-mini`：在AdminLTE.css中可以找到。  
![在这里插入图片描述][20201104232848323.png]

### 二. `wrapper`设置: AdminLTE.css ###

`header`设置：放在`header`标签里。

<!- - Logo - ->
    <a href="index2.html" class="logo"> 
    
      <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">
         
         <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
         </a>
       
       <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
          
          <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">
                   
                   <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>
                   
                  <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>
                  
                  <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>
           
           <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`显示，如下图。  
![在这里插入图片描述][20201104233115415.png]

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

![在这里插入图片描述][20201104233134802.png]  
![在这里插入图片描述][20201104233152449.png]

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

重点 如果是在`ajax`模式下：设置在`app.js`里。Ajax的布局模式，只需要在`body`标签里面添加`.ajax-template .fixed`类即可实现（`ajax`模式下需要注意所有元素不能有相同的id名，因为`ajax`模式下相当于把所有的内容加载到同一个页面，相同`id`会出问题，比如用`bootstrap`里的`tab`页，类似的相同函数名等等）  
![在这里插入图片描述][2020110423325897.png]  
![在这里插入图片描述][20201104233316478.png]  
最后，如果在`ajax`模式下，由于页面太多，比较复杂的情况下，类似与我做盛维的时候，记不得自己到底用过什么`id`名，最终大招：改写`app.js`里的`ajax`请求页面的源码，如下图：（大家在后期开发有问题时可以接着改，如果发现我的改写有问题的请轻轻喷(\_)  
![在这里插入图片描述][20201104233356505.png]

`app.js`的源码改写：  
![在这里插入图片描述][20201104171622649.png]

[20201104231127970.png]: /images/20210704/b74126b3a0b2457581b6a8fbd8393267.png
[20201104231252327.png]: /images/20210704/caba8bb1060e49e08f0048ecbbeec731.png
[20201104231335559.png]: /images/20210704/c2e9ce64807d48c1a8a48010a4c5c683.png
[20201104231402828.png]: /images/20210704/6c4efbec9f2a4583b2cc1f72ba752bbe.png
[20201104231429996.png]: /images/20210704/6123167c1672408b8e6c3a6316a286ec.png
[20201104231522925.png]: /images/20210704/01a79fdf1d304a0196bbcd9e2fd14bf6.png
[20201104231622678.png]: /images/20210704/09b988384c5d4ad2bdc70f6a570d0008.png
[20201104231636572.png]: /images/20210704/0fcf673791374b7e81f93d6331d20186.png
[2020110423165159.png]: /images/20210704/ae8ba1dd016a435b8c74881f789ca830.png
[20201104231731689.png]: /images/20210704/3ddfd93e329d49d4af21f6d5ed73bad2.png
[20201104231752645.png]: /images/20210704/24997f18fc9648cd82ee19a3bafa2df6.png
[20201104231809827.png]: /images/20210704/2a562545d4234187b915a0049a140724.png
[20201104231818530.png]: /images/20210704/8b0485436a9148b3938791126033fa78.png
[20201104232743214.png]: /images/20210704/7db02dae45e9483cb81ea86d049c7e1d.png
[20201104232755715.png]: /images/20210704/b1baaacbe0a34e01a5fbf23e268d38d4.png
[20201104232848323.png]: /images/20210704/bf65ad6a3c784219923175a9293e834d.png
[20201104233115415.png]: /images/20210704/44382cfb286940c2bd7faec1002e9734.png
[20201104233134802.png]: /images/20210704/a8a1e7a388b54b2ab52046407e085972.png
[20201104233152449.png]: /images/20210704/cb30f7f765674f0caf70e740758de98f.png
[2020110423325897.png]: /images/20210704/92cc98ca76de4049974f8ae691f58155.png
[20201104233316478.png]: /images/20210704/b8bf4f9064654e16ac8badbbd91acb57.png
[20201104233356505.png]: /images/20210704/4e1bc40f70694cbb8905de79fc620d39.png
[20201104171622649.png]: /images/20210704/dc6384b32d9d4276a20e0492e4b50d41.png