AdminLTE框架的基本使用

桃扇骨 2021-07-04 21:59 439阅读 0赞

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

## 下载 ##

1.  可以使用`git clone`到本地 `git clone https://github.com/almasaeed2010/AdminLTE.git`
2.  也可以在`github`中将其下载到本地，[点击][Link 1]

## 文件结构介绍 ##

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

1.  `bower_components`：存放了这个框架依赖的其他框架，如`bootstrap，jquery`、字体样式、图标样式等。
2.  `build`： 编译前的源文件目录
3.  `dist`：编译后的静态资源目录
4.  `pages`：目录下是一些示例页面
5.  `plugins`：目录存放依赖的插件
6.  `starter.html` ：是 `AdminLTE` 建议用来作为起点的参考示例
7.  `index.html`：是`AdminLTE`中比较完善的展示品，用于参考、借鉴。

下面以 `starter.html` 为例，来认识 `AdminLTE` 页面的基本结构。

## 初识start.html ##

`start.html`所涉及到的基本`js、css`来自于`bower_components`目录、`dist`目录。

### head 区域 ###

在 `head` 区域，由三类标签组成，分别是`meta、title、link`。`css`链接包括`bootstrap`、字体样式、图标样式、站点基本布局、皮肤颜色。下面是省略了用于引入外部样式表的 `links` 标签的示例。

<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
      <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
      <title>AdminLTE 2 | Starter</title>
      <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
      .......
     
    </head>

### `body`区域 ###

`body`区域由三部分组成，分别是头部、侧面导航栏、右侧内容展示。

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

#### 自定义主题样式 ####

1.  `skin-blue`：主题颜色，如果引入了`_all-skins.min.css`，有很多颜色可以选择,默认是蓝色。该样式表位于dist/css/skin。
2.  `sidebar-mini`：布局主题，在`AdminLTE.css`中可以找到。有五种选择`fixed、layout-boxed、layout-top-nav 、sidebar-collapse、sidebar-mini`

#### 头部区域 ####

<header class="main-header">
     
        
        <a href="{% url 'news:index' %}" class="logo">
          
          <span class="logo-mini"><b>P</b>Y</span>
          
          <span class="logo-lg"><b>Admin</b></span>
        </a>
     
        
        <nav class="navbar navbar-static-top" role="navigation">
          
          <a href="#" class="sidebar-toggle" data-toggle="push-menu" 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="{% static 'images/liuyifei.jpg' %}" class="user-image" alt="User Image">
                  
                  <span class="hidden-xs">{
       { request.user }}</span>
                </a>
                <ul class="dropdown-menu">
                  
                  <li class="user-header">
                    <img src="{% static 'images/liuyifei.jpg' %}" class="img-circle" alt="User Image">
     
                    <p>
                      学习使我快乐
                      <small>Member since Nov. 2019</small>
                    </p>
                  </li>
     
                  
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-default btn-flat">个人详情</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" 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>

1.  `logo-lg`隐藏，`logo-mini`显示

#### 左侧导航 ####

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

[Link 1]: https://github.com/almasaeed2010/AdminLTE/releases
[20201104165946673.png]: /images/20210704/344cd0f7343b48a884c31aa5fc27fc5a.png
[20201104170226268.png]: /images/20210704/c73c7419caa6408ca7a73e6812e64540.png
[20201104170443422.png]: /images/20210704/d13814e8d74844b19beb4ec8129bc605.png
[20201104170453808.png]: /images/20210704/5c9d744955f448ea841b4436b24addb8.png