UI框架——后台管理系统模板
一、AdminLTE后台管理系统模板
文档演示
仪表盘演示:https://3vshej.cn/AdminLTE/AdminLTE-2.4/ 源代码下载:https://3vshej.cn/AdminLTE/ 使用文档:https://itheima2017.gitbooks.io/adminlte2-itheima-doc/ 由于AdminLTE仪表盘代码过于复杂,因为组件太多,要自己灵活的使用要花很多时间了解源代码,并了解起框架的结构。因此,自己根据自己的想法,注释并且简洁化的修改了这个模板,可以根据自己的需求很灵活的使用起来。 修改后的界面如下
单页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | 起始页</title>
<!-- 告诉浏览器该页面是自适应布局 -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="nofollow noopener" >
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" rel="nofollow noopener" >
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css" rel="nofollow noopener" >
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css" rel="nofollow noopener" >
<!-- DataTables -->
<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="nofollow noopener" >
<!-- AdminLTE 皮肤。默认使用蓝色皮肤。
您可以选择其他皮肤。皮肤样式写在 body 标签中,
以便使之生效。 -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css" rel="nofollow noopener" >
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" rel="nofollow noopener" >
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<!--------------------------------------------- 头部 ------------------------------------------>
<header class="main-header">
<!------------------ 左上角的LOGO ----------------->
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>后台</b>管理</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>数据</b>后台管理</span>
</a>
<!----------------- 头部导航栏 ------------------>
<nav class="navbar navbar-static-top" role="navigation">
<!-- 导航栏收缩按钮-->
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">切换导航</span>
</a>
<!-- 导航栏右侧菜单 -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="用户图像">
<!-- hidden-xs 在小型设备上隐藏用户名,只显示图像。 -->
<span class="hidden-xs">Nick</span>
</a>
<!-- 点击头像的菜单 -->
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="用户图像">
<p>
Nick - Web 开发人员
<small>注册于2020年5月</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" class="btn btn-default btn-flat">资料</a>
</div>
<div class="pull-right">
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" class="btn btn-default btn-flat">退出</a>
</div>
</li>
</ul>
</li>
<!-- 最右侧的设置按钮 -->
<li>
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
</header>
<!-------------------------------------------- 左部侧边栏 ---------------------------------------------->
<aside class="main-sidebar">
<section class="sidebar">
<!--------- 用户状态面板 ----------->
<div class="user-panel">
<div class="pull-left image">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="用户图像">
</div>
<div class="pull-left info">
<p>Nick</p>
<!-- 状态 -->
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" ><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!---------- 侧边栏搜索框 --------->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="搜索...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i
class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!------------- 侧边栏菜单 ------------->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">主导航</li>
<!--------- 导航链接 ----------->
<li class="active"><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" ><i class="fa fa-link"></i> <span>链接</span></a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" ><i class="fa fa-link"></i> <span>另一个链接</span></a></li>
<li class="treeview">
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" ><i class="fa fa-link"></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="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >2级链接</a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >2级链接</a></li>
</ul>
</li>
</ul>
</section>
</aside>
<!------------------------------------- 页面主体内容 -------------------------------------->
<div class="content-wrapper">
<!------- 头部 (页眉) ------->
<section class="content-header">
<h2>
首页
<small>欢迎您</small>
</h2>
<!-- 面包屑 -->
<ol class="breadcrumb">
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" ><i class="fa fa-dashboard"></i> home</a></li>
<li class="active">样例</li>
</ol>
</section>
<!------ 主体内容 ------>
<section class="content container-fluid">
<!-- .box-body -->
<div class="box box-primary">
<div class="box-header with-border">
<h4 class="box-title">列表</h4>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" id="btn_add" name="btn_add" class="btn btn-default"
title="新建" onclick="">
<i class="fa fa-file-o"></i> 新建
</button>
<button type="button" id="refresh" name="refresh" class="btn btn-default"
title="刷新">
<i class="fa fa-refresh"></i> 刷新
</button>
</div>
</div>
</div>
<div class="pull-right">
<div class="form-group form-inline">
<select class="form-control" id="stype" name="stype">
<option value="0" selected>=请选择字段=</option>
<option value="1">公司名称</option>
<option value="2">法人代表</option>
</select>
<input type="text" id="svalue" name="svalue" class="form-control"
placeholder="请输入查找字段值" />
<div class="btn-group">
<button class="btn btn-info btn-search" id="search" name="search"
onclick="search()">查找</button>
</div>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>渲染引擎</th>
<th>浏览器</th>
<th>平台</th>
<th>引擎版本</th>
<th>CSS 等级</th>
</tr>
</thead>
<tbody>
<tr>
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- .box-footer-->
<div class="box-footer">
<div class="pull-left">
<div class="form-group form-inline">
总共2 页,共14 条数据。 每页
<select class="form-control">
<option>10</option>
<option>15</option>
<option>20</option>
<option>50</option>
<option>80</option>
</select> 条
</div>
</div>
<div class="box-tools pull-right">
<ul class="pagination">
<li>
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" aria-label="Previous">首页</a>
</li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >上一页</a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >1</a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >2</a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >3</a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >4</a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >5</a></li>
<li><a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >下一页</a></li>
<li>
<a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" aria-label="Next">尾页</a>
</li>
</ul>
</div>
</div>
<!-- /.box-footer-->
</div>
</section>
</div>
<!------- 尾部Footer ------>
<footer class="main-footer">
<!-- 右测内容 -->
<div class="pull-right hidden-xs">
任何你想要的
</div>
<!-- 默认左侧内容 -->
<strong>Copyright © 2016 <a href="#" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >Company</a>.</strong> All rights reserved.
</footer>
<!------------------------------------右侧设置按钮的侧边栏 ------------------------------------>
<aside class="control-sidebar control-sidebar-dark" style="display: none;">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><a href="#control-sidebar-home-tab" rel="nofollow noopener" data-toggle="tab"><i class="fa fa-home"></i></a></li>
<li><a href="#control-sidebar-settings-tab" rel="nofollow noopener" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h4 class="control-sidebar-heading">个人中心</h4>
</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<h4 class="control-sidebar-heading">常规设置</h4>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- 添加侧边栏的背景。这个 div必须放在 control-sidebar 之后 -->
<div class="control-sidebar-bg"></div>
</div>
<!--------------------------- 导入的 JS SCRIPTS ------------------------>
<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- DataTables -->
<!-- <script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script> -->
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
})
</script>
</body>
</html>
引用文件
在这两个文件夹里面 具体文件可以在官网下载 https://3vshej.cn/AdminLTE/ 也可以点击下载自己改写后的源代码(加了很多中文注释) 链接:https://pan.baidu.com/s/16tmxP5aat8eQdOvnGJ8Pkw 提取码:r5uu
二、layui后台管理系统模板
文档演示
单页演示:https://www.layui.com/admin/pro/ layui组件演示:https://www.layui.com/demo/ layui文档:https://www.layui.com/doc/ 使用后台管理系统模板主要的是能自己改写和使用系统中的相关组件和布局样式api,因此自己改写了一套简洁的模板外壳,以供可以很简单的套用并且开发。 简洁的界面如下:
单页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="./layui/css/layui.css" rel="nofollow noopener" >
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >控制台</a></li>
<li class="layui-nav-item"><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >商品管理</a></li>
<li class="layui-nav-item"><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >其它系统</a>
<dl class="layui-nav-child">
<dd><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >邮件管理</a></dd>
<dd><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >消息管理</a></dd>
<dd><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >基本资料</a></dd>
<dd><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >所有商品</a>
<dl class="layui-nav-child">
<dd><a href="./demo2.html" rel="nofollow noopener" >时间线</a></dd>
<dd><a href="./demo3.html" rel="nofollow noopener" >评分</a></dd>
<dd><a href="./demo4.html" rel="nofollow noopener" >分页</a></dd>
<dd><a href="./demo5.html" rel="nofollow noopener" >表单</a></dd>
<dd><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >列表一</a></dd>
<dd><a href="javascript:;" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >列表二</a></dd>
<dd><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >云市场</a></li>
<li class="layui-nav-item"><a href="" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" rel="nofollow noopener" >发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
<h2>首页</h2>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function () {
var element = layui.element;
});
</script>
</body>
</html>
引用的css、js文件可以官网下载: https://www.layui.com/admin/ 也可以点击以下链接下载自己改写后的源代码 链接:https://pan.baidu.com/s/1RODE32nrh62xeoBCRHFteQ 提取码:ypst
相关文章
- Spring学习笔记(二十)——springboot基于AdminLTE的后台管理系统模板
- 电商项目基本业务概述||电商后台管理系统的功能|| 电商后台管理系统的开发模式(前后端分离)|| 电商后台管理系统的技术选型[通俗易懂]
- Typecho后台模板MDUI风格 – 专为Typecho设计
- 【说站】百度统计后台百度索引量没有数据是什么原因
- 如何删除WordPress后台标题后缀的方法?
- Vue3.0商店后台管理系统项目实战-模板语法
- 平台管理后台与商家菜单资源管理:商家权限及其菜单资源管理设计
- 快速搭建基于Vue3+Vite2+Arco+Typescript+Pinia后台管理系统模板,文末有福利
- CDNFLY系统模板 带独立后台 自带SEO 内容管理 栏目管理 系统设置等 CDN商务官网模板
- 使用VirtualBox在后台运行镜像
- Linux下的后台指令操作指南(linux后台命令)
- 使用Redis实现后台安全退出(redis退出后台启动)
- 用类的继承关系(重写父类的方法)实现简易后台代码模板
- 使用django-suit为django1.7admin后台添加模板