01：adminLTE2基本使⽤
1.1 adminLTE介绍
1、adminLTE 介绍
1、基于Bootstrap3⾼度可定制的响应式管理模板，免去前端架构师⼤量的js和css的编写
2、adminLTE除了可以使⽤bootstrap3的⼤多数样式之外，⾃⾝也提供了⼀些⾮常实⽤的样式包装，并且在样式演⽰中已经基本罗列出来了。
3、adminLTE的插件中使⽤的基本都是bootstrap和jquery的插件。
2、adminLTE 功能
1、AdminLTE 也同样具备了后台应有模板，像登录模板、注册模板、个⼈模板、404模板、500模板、空⽩模板等，这些可以在下载后在 Examples 菜单⾥查看到。
2、⾥⾯的组件 Widgets 页⾯，不要以为是⼀些像 easyui 的组件，其实也是 AdminLTE 定义的⼀些 css 样式，像 box 样式，是⾥⾯最基础最常⽤的⼀个。
3、⾥⾯的 js 插件除了bootstrap ⾃带那模态窗、导航、下拉菜单外，其它就是集成⼀些有名的第三⽅插件，像 select2、CK Editor、iCheck、DataTables 等等。
3、⽹址
1.2 基本使⽤（base.html）
1、利⽤adminLTE完成最基础后台界⾯（base.html）
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="{% block refresh_time %}{% endblock %}">
<title>{% block title %}{% endblock %}{% if settings.SITE_TITLE %} | {{ settings.SITE_TITLE }}{% endif %}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/static/AdminLTE/dist/css/AdminLTE.min.css" type="text/css">
<link rel="stylesheet" href="/static/AdminLTE/bootstrap/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="/static/AdminLTE/fonts/font-awesome.css" type="text/css"/>
<link rel="stylesheet" href="/static/AdminLTE/ionicons/ionicons.css" type="text/css">
<link rel="stylesheet" href="/static/AdminLTE/dist/css/AdminLTE.css" type="text/css">
<link rel="stylesheet" href="/static/AdminLTE/plugins/select2/select2.css">
<link rel="stylesheet" href="/static/DataTables-1.10.12/media/css/dataTables.bootstrap.css">
<link rel="shortcut icon" href="/static/opwf.ico">
<link rel="stylesheet" href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="/static/AdminLTE/dist/css/skins/_all-skins.min.css">
<!-- jQuery 2.2.0 -->
<script src="/static/AdminLTE/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!--[if IE 8]>
<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
<![endif]-->
<style>
.errorlist {
color: red;
}
.error {
color: red;
}
</style>
{% block extra_css %}{% endblock %}
{% block extra_js %}{% endblock %}
<!--[if lt IE 9]>
<script src="/static/js/html5shiv.js"></script>
<script src="/static/js/respond.min.js"></script>
<![endif]-->
</head>
<!-- 菜单头部颜⾊：skin-blue表⽰头部为蓝⾊ -->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- 第⼀部分：头部菜单-->
<header class="main-header">
<a href="/" class="logo">
<span class="logo-mini"><b>公司名</b></span>
<span class="logo-lg"><b>公司名称</b>·系统平台名称</span>
</a>
<nav class="navbar navbar-static-top">
<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">
为什么使用bootstrap?<!-- 右侧⽤户信息 -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>
<span>张三<i class="caret"></i></span>
</a>
<ul class="dropdown-menu">
<li class="user-header bg-light-blue">
<p>
张三
<small>财务部</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>
</ul>
</div>
</nav>
</header>
<!-- 第⼆部分：左侧菜单栏 -->
<aside class="main-sidebar">
{% include "left_side.html" %}
</aside>
<!-- 第三部分：后台中间内容-->
<div class="content-wrapper">
<!-- 1、content01：头部与内容中间的分隔部分 -->
<section class="content-header">
<h1>
<small>
{% block console_name %}
{% endblock %}
</small>
</h1>
<!-- 内容最上⾯的导航 -->
<ol class="breadcrumb">
{# <!-- {% include "nav_header.html" %} -->#}
{% block ol_a_link %}
{% endblock %}
</ol>
</section>
<!-- 2、content02：页⾯主要内容 -->
<section class="content">
{% block main_content %}
{% endblock %}
</section>
</div>
<!-- 第四部分：页⾯底部 -->
<footer class="main-footer">
<strong>Copyright © 2017-2018 <a href="#">公司名称-部门名称</a>.</strong>
</footer>
</div>
<!-- Bootstrap 3.3.5 -->
<script src="/static/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- date-range-picker -->
<script src="/static/AdminLTE/plugins/moment/moment.min.js"></script>
<script src="/static/AdminLTE/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="/static/AdminLTE/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="/static/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="/static/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/static/AdminLTE/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="/static/AdminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/AdminLTE/dist/js/app.min.js"></script>
<script src="/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/static/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
<script src="/static/DataTables-1.10.12/media/js/dataTables.bootstrap.min.js"></script>
<script src="/static/AdminLTE/plugins/select2/select2.full.min.js"></script>
{% block end_js %}
{% endblock %}
<script>
{% if request.path != '/' %}
$(function () {
var q = '{{ request.path }}';
var left_ui = q.split('/')[1];
/
/alert(left_ui);
try {
var test = ElementById(left_ui);
test.className += " active"
}
catch (err) {
}
});
{% endif %}
</script>
</body>
</html>
base.html
<!--左侧菜单-->
<section class="sidebar">
<ul class="sidebar-menu">
<li class="treeview" id="accounts">
<a href="#">
<i class="fa fa-user"></i>
<span>⽤户中⼼</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i>个⼈信息</a></li>
</ul>
</li>
<li class="treeview" id="workflow">
<a href="#">
<i class="fa fa-sticky-note"></i>
<span>我的⼯单</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a href="#"><i class="fa fa-circle-o text-aqua"></i>新建⼯单</a>
</li>
<li>
<a href="#"><i class="fa fa-circle-o text-aqua"></i>审批中⼯单</a>
</li>
<li>
<a href="#"><i class="fa fa-circle-o text-aqua"></i>被退回⼯单</a>
</li>
<li>
<a href="#"><i class="fa fa-circle-o text-green"></i>完成⼯单</a>
</li>
<li>
<a href="#"><i class="fa fa-circle-o text-red"></i>待审批⼯单</a>
</li>
<li>
<a href="#"><i class="fa fa-circle-o text-yellow"></i>已审批⼯单</a>
</li>
<li>
<a href="#"><i class="fa fa-circle-o text-blue"></i>知悉⼯单</a>
</li>
</ul>
</li>
<li class="treeview" id="workordermanager">
<a href="#">
<i class="fa fa-suitcase"></i>
<span>管理</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i>所有⼯单</a>
</li>
<li><a href="#"><i class="fa fa-circle-o"></i><span>部门管理</span></a>
<li><a href="#"><i
class="fa fa-circle-o"></i><span>审批⾓⾊管理</span></a></li> <li><a href="#"><i
class="fa fa-circle-o"></i><span>审批⼈员管理</span></a></li>
<li><a href="#"><i
class="fa fa-circle-o"></i><span>⼯单配置管理</span></a> <li><a href="#"><i class="fa fa-circle-o"></i>Token管理</a>
</li>
</ul>
</li>
</ul>
</section>
<!--左侧菜单-->
left_side.html 左侧菜单
2、base.html 效果图
1.3 引⼊base.html完成 index.html页⾯
1、index.html页⾯
{% extends "base.html" %}
{% block title %}运维⼯单平台{% endblock %}
{% block console_name %}
运维⼯单平台
{% endblock %}
{% block extra_js %}
{% endblock %}
{% block ol_a_link %}
{% endblock %}
{% block main_content %}
<div class="row">
<div class="col-lg-3 col-xs-3">
<div class="small-box bg-aqua">
<div class="inner" id="server_count">
<p>我的进⾏中⼯单</p>
<h3>110</h3>
</div>
<a href="#">详情</a>
<div class="icon">
<i class="ion ion-gear-a"></i>
</div>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论