zoukankan      html  css  js  c++  java

  • 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显示
    • 左侧导航

    ​​​​​​​
  • 相关阅读:
    解决iex -S mix报错
    OTP服务器
    多进程
    字符串与二进制
    IphoneX适配正确姿势
    Babel 配置用法解析
    babel版本变化
    你好，babel
    XSS攻击 && CSRF攻击 基础理解
    小程序开发初体验~
  • 原文地址：https://www.cnblogs.com/qiu18359243869/p/14521926.html
Copyright © 2011-2022 走看看