adminLte的基本使用

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

下载

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

文件结构介绍

  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 标签的示例。

  1.  
    <head>
  2.  
    <meta charset="utf-8">
  3.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.  
    <!-- Tell the browser to be responsive to screen width -->
  5.  
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  6.  
    <title>AdminLTE 2 | Starter</title>
  7.  
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  8.  
    .......
  9.  
     
  10.  
    </head>

body区域

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

  1.  
    <header class="main-header">
  2.  
    ......
  3.  
    </header>
  4.  
    <aside class="main-sidebar">
  5.  
    .......
  6.  
    </aside>
  7.  
    <div class="content-wrapper">
  8.  
    .......
  9.  
    </div>

  • 自定义主题样式
  1.  
    <body class="hold-transition skin-yellow sidebar-mini">
  2.  
    ......
  3.  
    </body>
  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
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
  • 头部区域
  1.  
    <header class="main-header">
  2.  
     
  3.  
    <!-- Logo -->
  4.  
    <a href="{% url 'news:index' %}" class="logo">
  5.  
    <!-- mini logo for sidebar mini 50x50 pixels -->
  6.  
    <span class="logo-mini"><b>P</b>Y</span>
  7.  
    <!-- logo for regular state and mobile devices -->
  8.  
    <span class="logo-lg"><b>Admin</b></span>
  9.  
    </a>
  10.  
     
  11.  
    <!-- Header Navbar -->
  12.  
    <nav class="navbar navbar-static-top" role="navigation">
  13.  
    <!-- Sidebar toggle button-->
  14.  
    <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
  15.  
    <span class="sr-only">Toggle navigation</span>
  16.  
    </a>
  17.  
    <!-- Navbar Right Menu -->
  18.  
    <div class="navbar-custom-menu">
  19.  
    <ul class="nav navbar-nav">
  20.  
    <!-- Messages: style can be found in dropdown.less-->
  21.  
    <!-- User Account Menu -->
  22.  
    <li class="dropdown user user-menu">
  23.  
    <!-- Menu Toggle Button -->
  24.  
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  25.  
    <!-- The user image in the navbar-->
  26.  
    <img src="{% static 'images/liuyifei.jpg' %}" class="user-image" alt="User Image">
  27.  
    <!-- hidden-xs hides the username on small devices so only the image appears. -->
  28.  
    <span class="hidden-xs">{{ request.user }}</span>
  29.  
    </a>
  30.  
    <ul class="dropdown-menu">
  31.  
    <!-- The user image in the menu -->
  32.  
    <li class="user-header">
  33.  
    <img src="{% static 'images/liuyifei.jpg' %}" class="img-circle" alt="User Image">
  34.  
     
  35.  
    <p>
  36.  
    学习使我快乐
  37.  
    <small>Member since Nov. 2019</small>
  38.  
    </p>
  39.  
    </li>
  40.  
     
  41.  
    <!-- Menu Footer-->
  42.  
    <li class="user-footer">
  43.  
    <div class="pull-left">
  44.  
    <a href="#" class="btn btn-default btn-flat">个人详情</a>
  45.  
    </div>
  46.  
    <div class="pull-right">
  47.  
    <a href="#" class="btn btn-default btn-flat">登出</a>
  48.  
    </div>
  49.  
    </li>
  50.  
    </ul>
  51.  
    </li>
  52.  
    <!-- Control Sidebar Toggle Button -->
  53.  
    <li>
  54.  
    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
  55.  
    </li>
  56.  
    </ul>
  57.  
    </div>
  58.  
    </nav>
  59.  
    </header>
  1. logo-lg隐藏，logo-mini显示
  • 左侧导航

​​​​​​​

posted @ 2021-03-12 09:24  厦门哈韩  阅读(1342)  评论(0)  编辑  收藏  举报