CSS

UI框架——后台管理系统模板

Nick · 5月20日 · 2020年本文11195字 · 阅读28分钟17,628

一、AdminLTE后台管理系统模板

文档演示

仪表盘演示:https://3vshej.cn/AdminLTE/AdminLTE-2.4/
源代码下载:https://3vshej.cn/AdminLTE/
使用文档:https://itheima2017.gitbooks.io/adminlte2-itheima-doc/
由于AdminLTE仪表盘代码过于复杂,因为组件太多,要自己灵活的使用要花很多时间了解源代码,并了解起框架的结构。因此,自己根据自己的想法,注释并且简洁化的修改了这个模板,可以根据自己的需求很灵活的使用起来。
修改后的界面如下
UI框架——后台管理系统模板-左眼会陪右眼哭の博客
在这里插入图片描述

单页代码

<!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>

引用文件

UI框架——后台管理系统模板-左眼会陪右眼哭の博客
在这两个文件夹里面
具体文件可以在官网下载
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

0 条回应
在线人数:1人
隐藏