Last active
May 22, 2017 07:34
-
-
Save corwien/b4037b9b376f8cd01696fa6e1f335839 to your computer and use it in GitHub Desktop.
Simple and easy adminlte2 demo 管理后台示例 https://segmentfault.com/a/1190000009496018
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>AdminLTE 2 | Dashboard</title> | |
<!-- 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"> | |
<!-- Bootstrap 3.3.6 --> | |
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> | |
<!-- Font Awesome --> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> | |
<!-- Ionicons --> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> | |
<!-- Theme style --> | |
<link rel="stylesheet" href="dist/css/AdminLTE.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="dist/css/skins/_all-skins.min.css"> | |
<!-- iCheck --> | |
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css"> | |
<!-- Morris chart --> | |
<link rel="stylesheet" href="plugins/morris/morris.css"> | |
<!-- jvectormap --> | |
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css"> | |
<!-- Date Picker --> | |
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> | |
<!-- Daterange picker --> | |
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css"> | |
<!-- bootstrap wysihtml5 - text editor --> | |
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> | |
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> | |
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body class="hold-transition skin-blue sidebar-mini"> | |
<div class="wrapper"> | |
<header class="main-header"> | |
<!-- Logo --> | |
<a href="index2.html" class="logo"> | |
<!-- mini logo for sidebar mini 50x50 pixels --> | |
<span class="logo-mini"><b>A</b>LT</span> | |
<!-- logo for regular state and mobile devices --> | |
<span class="logo-lg"><b>Admin</b>LTE</span> | |
</a> | |
<!-- Header Navbar: style can be found in header.less --> | |
<nav class="navbar navbar-static-top"> | |
<!-- Sidebar toggle button--> | |
<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"> | |
<!-- Messages: style can be found in dropdown.less--> | |
<!-- User Account: style can be found in dropdown.less --> | |
<li class="dropdown user user-menu"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> | |
<span class="hidden-xs">超级管理员</span> | |
</a> | |
<ul class="dropdown-menu"> | |
<!-- User image --> | |
<li class="user-header"> | |
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> | |
<p> | |
超级管理员 - Web Developer | |
<small>05,25 2017</small> | |
</p> | |
</li> | |
<!-- Menu Body --> | |
<!-- Menu Footer--> | |
<li class="user-footer"> | |
<div class="pull-left"> | |
<a href="#" class="btn btn-default btn-flat">Profile</a> | |
</div> | |
<div class="pull-right"> | |
<a href="#" class="btn btn-default btn-flat">Sign out</a> | |
</div> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
</header> | |
<!-- Left side column. contains the logo and sidebar --> | |
<aside class="main-sidebar"> | |
<!-- sidebar: style can be found in sidebar.less --> | |
<section class="sidebar"> | |
<!-- Sidebar user panel --> | |
<div class="user-panel"> | |
<div class="pull-left image"> | |
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> | |
</div> | |
<div class="pull-left info"> | |
<p>admin</p> | |
<a href="#"><i class="fa fa-circle text-success"></i> Online</a> | |
</div> | |
</div> | |
<!-- sidebar menu: : style can be found in sidebar.less --> | |
<ul class="sidebar-menu"> | |
<li class="active treeview"> | |
<a href="#"> | |
<i class="fa fa-home"></i> <span>Home</span> | |
<span class="pull-right-container"> | |
<i class="fa fa-angle-left pull-right"></i> | |
</span> | |
</a> | |
<ul class="treeview-menu"> | |
<li class="active"><a href="demo.html"><i class="fa fa-circle-o"></i> 统计</a></li> | |
</ul> | |
</li> | |
<li class="treeview"> | |
<a href="#"> | |
<i class="fa fa-user"></i> | |
<span>用户</span> | |
<span class="pull-right-container"> | |
<i class="fa fa-angle-left pull-right"></i> | |
</span> | |
</a> | |
<ul class="treeview-menu"> | |
<li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> 角色管理</a></li> | |
<li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> 用户列表</a></li> | |
</ul> | |
</li> | |
<li class="treeview"> | |
<a href="#"> | |
<i class="fa fa-files-o"></i> | |
<span>文章</span> | |
<span class="pull-right-container"> | |
<i class="fa fa-angle-left pull-right"></i> | |
</span> | |
</a> | |
<ul class="treeview-menu"> | |
<li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> 文章管理</a></li> | |
<li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> 发布文章</a></li> | |
<li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> 文章分类</a></li> | |
</ul> | |
</li> | |
<li> | |
<a href="pages/widgets.html"> | |
<i class="fa fa-tags"></i> <span>标签</span> | |
<span class="pull-right-container"> | |
<small class="label pull-right bg-green">new</small> | |
</span> | |
</a> | |
</li> | |
<li> | |
<a href="pages/widgets.html"> | |
<i class="fa fa-navicon"></i> <span>导航</span> | |
<span class="pull-right-container"> | |
<small class="label pull-right bg-green"></small> | |
</span> | |
</a> | |
</li> | |
<li class="treeview"> | |
<a href="#"> | |
<i class="fa fa-table"></i> <span>Tables</span> | |
<span class="pull-right-container"> | |
<i class="fa fa-angle-left pull-right"></i> | |
</span> | |
</a> | |
<ul class="treeview-menu"> | |
<li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li> | |
<li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li> | |
</ul> | |
</li> | |
<li> | |
<a href="pages/calendar.html"> | |
<i class="fa fa-calendar"></i> <span>Calendar</span> | |
<span class="pull-right-container"> | |
<small class="label pull-right bg-red">3</small> | |
<small class="label pull-right bg-blue">17</small> | |
</span> | |
</a> | |
</li> | |
<li class="treeview"> | |
<a href="#"> | |
<i class="fa fa-folder"></i> <span>Examples</span> | |
<span class="pull-right-container"> | |
<i class="fa fa-angle-left pull-right"></i> | |
</span> | |
</a> | |
<ul class="treeview-menu"> | |
<li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li> | |
<li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li> | |
<li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li> | |
<li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li> | |
<li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li> | |
<li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li> | |
<li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li> | |
<li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li> | |
<li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li> | |
</ul> | |
</li> | |
<li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li> | |
<li class="treeview"> | |
<a href="#"> | |
<i class="fa fa-cog"></i> | |
<span>系统设置</span> | |
<span class="pull-right-container"> | |
<i class="fa fa-angle-left pull-right"></i> | |
</span> | |
</a> | |
<ul class="treeview-menu"> | |
<li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> 角色管理</a></li> | |
<li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> 用户列表</a></li> | |
</ul> | |
</li> | |
</ul> | |
</section> | |
<!-- /.sidebar --> | |
</aside> | |
<!-- Content Wrapper. Contains page content 注意:这里是后台详情页 20170522 --> | |
<div class="content-wrapper"> | |
<!-- Content Header (Page header) --> | |
<section class="content-header"> | |
<h1> | |
Dashboard | |
<small>Control panel</small> | |
</h1> | |
<ol class="breadcrumb"> | |
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> | |
<li class="active">Dashboard</li> | |
</ol> | |
</section> | |
<!-- Main content --> | |
<section class="content"> | |
<!-- Small boxes (Stat box) --> | |
<div class="row"> | |
<!-- ./col --> | |
</div> | |
<!-- /.row --> | |
<!-- Main row --> | |
<div class="row"> | |
<!-- Left col --> | |
<section class="col-lg-7 connectedSortable"> | |
<!-- TO DO List --> | |
<div class="box box-primary"> | |
<div class="box-header"> | |
<i class="ion ion-clipboard"></i> | |
<h3 class="box-title">To Do List</h3> | |
<div class="box-tools pull-right"> | |
<ul class="pagination pagination-sm inline"> | |
<li><a href="#">«</a></li> | |
<li><a href="#">1</a></li> | |
<li><a href="#">2</a></li> | |
<li><a href="#">3</a></li> | |
<li><a href="#">»</a></li> | |
</ul> | |
</div> | |
</div> | |
<!-- /.box-header --> | |
<div class="box-body"> | |
<ul class="todo-list"> | |
<li> | |
<!-- drag handle --> | |
<span class="handle"> | |
<i class="fa fa-ellipsis-v"></i> | |
<i class="fa fa-ellipsis-v"></i> | |
</span> | |
<!-- checkbox --> | |
<input type="checkbox" value=""> | |
<!-- todo text --> | |
<span class="text">Design a nice theme</span> | |
<!-- Emphasis label --> | |
<small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small> | |
<!-- General tools such as edit or delete--> | |
<div class="tools"> | |
<i class="fa fa-edit"></i> | |
<i class="fa fa-trash-o"></i> | |
</div> | |
</li> | |
<li> | |
<span class="handle"> | |
<i class="fa fa-ellipsis-v"></i> | |
<i class="fa fa-ellipsis-v"></i> | |
</span> | |
<input type="checkbox" value=""> | |
<span class="text">Make the theme responsive</span> | |
<small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small> | |
<div class="tools"> | |
<i class="fa fa-edit"></i> | |
<i class="fa fa-trash-o"></i> | |
</div> | |
</li> | |
<li> | |
<span class="handle"> | |
<i class="fa fa-ellipsis-v"></i> | |
<i class="fa fa-ellipsis-v"></i> | |
</span> | |
<input type="checkbox" value=""> | |
<span class="text">Let theme shine like a star</span> | |
<small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small> | |
<div class="tools"> | |
<i class="fa fa-edit"></i> | |
<i class="fa fa-trash-o"></i> | |
</div> | |
</li> | |
<li> | |
<span class="handle"> | |
<i class="fa fa-ellipsis-v"></i> | |
<i class="fa fa-ellipsis-v"></i> | |
</span> | |
<input type="checkbox" value=""> | |
<span class="text">Let theme shine like a star</span> | |
<small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small> | |
<div class="tools"> | |
<i class="fa fa-edit"></i> | |
<i class="fa fa-trash-o"></i> | |
</div> | |
</li> | |
<li> | |
<span class="handle"> | |
<i class="fa fa-ellipsis-v"></i> | |
<i class="fa fa-ellipsis-v"></i> | |
</span> | |
<input type="checkbox" value=""> | |
<span class="text">Check your messages and notifications</span> | |
<small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small> | |
<div class="tools"> | |
<i class="fa fa-edit"></i> | |
<i class="fa fa-trash-o"></i> | |
</div> | |
</li> | |
<li> | |
<span class="handle"> | |
<i class="fa fa-ellipsis-v"></i> | |
<i class="fa fa-ellipsis-v"></i> | |
</span> | |
<input type="checkbox" value=""> | |
<span class="text">Let theme shine like a star</span> | |
<small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small> | |
<div class="tools"> | |
<i class="fa fa-edit"></i> | |
<i class="fa fa-trash-o"></i> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<!-- /.box-body --> | |
<div class="box-footer clearfix no-border"> | |
<button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button> | |
</div> | |
</div> | |
<!-- /.box --> | |
</section> | |
<!-- /.Left col --> | |
<!-- right col (We are only adding the ID to make the widgets sortable)--> | |
<section class="col-lg-5 connectedSortable"> | |
<!-- Map box --> | |
<div class="box box-solid bg-light-blue-gradient"> | |
<div class="box-header"> | |
<!-- tools box --> | |
<div class="pull-right box-tools"> | |
<button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="Date range"> | |
<i class="fa fa-calendar"></i></button> | |
<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;"> | |
<i class="fa fa-minus"></i></button> | |
</div> | |
<!-- /. tools --> | |
<i class="fa fa-map-marker"></i> | |
<h3 class="box-title"> | |
Visitors | |
</h3> | |
</div> | |
<div class="box-body"> | |
<div id="world-map" style="height: 250px; width: 100%;"></div> | |
</div> | |
<!-- /.box-body--> | |
<div class="box-footer no-border"> | |
<div class="row"> | |
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4"> | |
<div id="sparkline-1"></div> | |
<div class="knob-label">Visitors</div> | |
</div> | |
<!-- ./col --> | |
<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4"> | |
<div id="sparkline-2"></div> | |
<div class="knob-label">Online</div> | |
</div> | |
<!-- ./col --> | |
<div class="col-xs-4 text-center"> | |
<div id="sparkline-3"></div> | |
<div class="knob-label">Exists</div> | |
</div> | |
<!-- ./col --> | |
</div> | |
<!-- /.row --> | |
</div> | |
</div> | |
<!-- /.box --> | |
</section> | |
<!-- right col --> | |
</div> | |
<!-- /.row (main row) --> | |
</section> | |
<!-- /.content --> | |
</div> | |
<!-- /.content-wrapper --> | |
<footer class="main-footer"> | |
<div class="pull-right hidden-xs"> | |
<b>Version</b> 2.3.8 | |
</div> | |
<strong>Copyright © 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights | |
reserved. | |
</footer> | |
</div> | |
<!-- ./wrapper --> | |
<!-- jQuery 2.2.3 --> | |
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> | |
<!-- jQuery UI 1.11.4 --> | |
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> | |
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> | |
<script> | |
$.widget.bridge('uibutton', $.ui.button); | |
</script> | |
<!-- Bootstrap 3.3.6 --> | |
<script src="bootstrap/js/bootstrap.min.js"></script> | |
<!-- Morris.js charts --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> | |
<script src="plugins/morris/morris.min.js"></script> | |
<!-- Sparkline --> | |
<script src="plugins/sparkline/jquery.sparkline.min.js"></script> | |
<!-- jvectormap --> | |
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script> | |
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> | |
<!-- jQuery Knob Chart --> | |
<script src="plugins/knob/jquery.knob.js"></script> | |
<!-- daterangepicker --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> | |
<script src="plugins/daterangepicker/daterangepicker.js"></script> | |
<!-- datepicker --> | |
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> | |
<!-- Bootstrap WYSIHTML5 --> | |
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> | |
<!-- Slimscroll --> | |
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> | |
<!-- FastClick --> | |
<script src="plugins/fastclick/fastclick.js"></script> | |
<!-- AdminLTE App --> | |
<script src="dist/js/app.min.js"></script> | |
<!-- AdminLTE dashboard demo (This is only for demo purposes) --> | |
<script src="dist/js/pages/dashboard.js"></script> | |
<!-- AdminLTE for demo purposes --> | |
<script src="dist/js/demo.js"></script> | |
</body> | |
</html> |
Author
corwien
commented
May 22, 2017
•
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment