AdminLTE框架的基本使⽤
框架介绍：AdminLTE是⼀个完全响应管理模板。基于Bootstrap3，jQuery 3.3.1 这两个框架框架，易定制模板。适合多种屏幕分辨率，从⼩型移动设备到⼤型台式机。内置了多个页⾯，包括仪表盘、邮箱、⽇历、锁屏、登录及注册、404错误、500错误等页⾯。对于后台站点的模板渲染，有很⼤的作⽤。
下载
1. 可以使⽤git clone到本地            git clone github/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 标签的⽰例。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<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区域由三部分组成，分别是头部、侧⾯导航栏、右侧内容展⽰。
<header class="main-header">
......
</header>
<aside class="main-sidebar">
.......
</aside>
<div class="content-wrapper">
.......
</div>
⾃定义主题样式
<body class="hold-transition skin-yellow sidebar-mini">
......
</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                              |
头部区域
<header class="main-header">
<!-- Logo -->
<a href="{% url 'news:index' %}" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>P</b>Y</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b></span>
</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
jquery框架原理
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="{% static 'images/liuyifei.jpg' %}" class="user-image" alt="User Image">              <!-- hidden-xs hides the username on small devices so only the image appears. -->              <span class="hidden-xs">{{ request.user }}</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the 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>
<!-- Menu Footer-->
<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>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
</header>
1. logo-lg隐藏，logo-mini显⽰
左侧导航

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。