1. AdminLTE 基本介绍
AdminLTE 是一款建立在 bootstrap 和 jquery 之上的开源的模板主题工具，它提供了一系列响应的、可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容 PC 和移动端。通过 AdminLTE，我们可以快速的创建一个响应式的 Html5 网站。AdminLTE 框架在网页架构与设计上，有很大的辅助作用，尤其是前端架构设计师，用好AdminLTE 不但美观，而且可以免去写很大 CSS 与 JS 的工作量。
2. AdminLTE 的下载
https://github.com/itheima2017/adminlte2-itheima
3. AdminLTE 的布局
- .wrapper包住了body下的所有代码
- .main-header里是网站的logo和导航栏的代码
- .main-sidebar里是用户面板和侧边栏菜单的代码
- .content-wrapper里是页面的页面和内容区域的代码
- .main-footer里是页脚的代码
- .control-sidebar里是页面右侧侧边栏区域的代码
4. AdminLTE 快速入门
-
创建一个 maven 工程
-
将 docafe-adminlte2-itcast-master\adminlte2-itcast\release\dist 下的 css，img，plugins 三个文件夹复制到 web-app 下
-
在 web-app 中创建一个 pages 文件夹
-
将 docafe-adminlte2-itcast-master\adminlte2-itcast\release\dist\pages 中的 all-admin-index.html 复制到pages 文件夹中，并重命名为 index.html
-
按照自己的需求，修改 index.html
<!DOCTYPE html> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>数据 - AdminLTE2定制版</title> <meta name="description" content="AdminLTE2定制版"> <meta name="keywords" content="AdminLTE2定制版"> <!-- 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 --> <!-- Font Awesome --> <!-- Ionicons --> <!-- iCheck --> <!-- Morris chart --> <!-- jvectormap --> <!-- Date Picker --> <!-- Daterange picker --> <!-- Bootstrap time Picker --> <!--<link rel="stylesheet" href="../../../plugins/timepicker/bootstrap-timepicker.min.css">--> <!-- bootstrap wysihtml5 - text editor --> <!--数据表格--> <!-- 表格树 --> <!-- select2 --> <!-- Bootstrap Color Picker --> <!-- bootstrap wysihtml5 - text editor --> <!--bootstrap-markdown--> <!-- Theme style --> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <!-- Ion Slider --> <!-- ion slider Nice --> <!-- bootstrap slider --> <!-- bootstrap-datetimepicker --> <!-- 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]--> <!-- jQuery 2.2.3 --> <!-- jQuery UI 1.11.4 --> <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> <!-- Bootstrap 3.3.6 --> <!-- Morris.js charts --> <!-- Sparkline --> <!-- jvectormap --> <!-- jQuery Knob Chart --> <!-- daterangepicker --> <!-- datepicker --> <!-- Bootstrap WYSIHTML5 --> <!-- Slimscroll --> <!-- FastClick --> <!-- iCheck --> <!-- AdminLTE App --> <!-- 表格树 --> <!-- select2 --> <!-- bootstrap color picker --> <!-- bootstrap time picker --> <!--<script src="../../../plugins/timepicker/bootstrap-timepicker.min.js"></script>--> <!-- Bootstrap WYSIHTML5 --> <!--bootstrap-markdown--> <!-- CK Editor --> <!-- InputMask --> <!-- DataTables --> <!-- ChartJS 1.0.1 --> <!-- FLOT CHARTS --> <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized --> <!-- FLOT PIE PLUGIN - also used to draw donut charts --> <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts --> <!-- jQuery Knob --> <!-- Sparkline --> <!-- Morris.js charts --> <!-- Ion Slider --> <!-- Bootstrap slider --> <!-- bootstrap-datetimepicker --> <!-- 页面meta /--> <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css"> <link rel="stylesheet" href="../plugins/iCheck/square/blue.css"> <link rel="stylesheet" href="../plugins/morris/morris.css"> <link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css"> <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css"> <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css"> <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css"> <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css"> <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css"> <link rel="stylesheet" href="../plugins/select2/select2.css"> <link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css"> <link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css"> <link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css"> <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css"> <link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css"> <link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css"> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <!-- 页面头部 --> <header class="main-header"> <!-- Logo --> <a href="all-admin-index.html" 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"> <!--收起导航侧栏按钮--> <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"> <!--登录用户信息--> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="../img/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">ZT</span> </a> <ul class="dropdown-menu"> <!-- User image --> <li class="user-header"> <img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image"> <p> ZT - 数据管理员 <small>最后登录 11:20AM</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"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!--用户栏--> <div class="user-panel"> <div class="pull-left image"> <img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>ZT</p> <a href="#"><i class="fa fa-circle text-success"></i> 在线</a> </div> </div> <!--左侧菜单栏--> <ul class="sidebar-menu"> <li class="header">菜单</li> <!--首页--> <li id="admin-index"><a href="#"><i class="fa fa-dashboard"></i> <span>首页</span></a> </li> <!--系统管理--> <li class="treeview"> <a href="#"> <i class="fa fa-folder"></i> <span>系统管理</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="admin-login"> <a href="#"> <i class="fa fa-circle-o"></i> 用户管理 </a> </li> <li id="admin-register"> <a href="#"> <i class="fa fa-circle-o"></i> 角色管理 </a> </li> </ul> </li> <!--基础数据--> <li class="treeview"> <a href="#"> <i class="fa fa-pie-chart"></i> <span>基础数据</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="charts-chartjs"> <a href="#"> <i class="fa fa-circle-o"></i> 产品管理 </a> </li> <li id="charts-morris"> <a href="all-charts-morris.html"> <i class="fa fa-circle-o"></i> 订单管理 </a> </li> </ul> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- 导航侧栏 /--> <!-- 内容区域 --> <div class="content-wrapper"> <img src="../img/center.jpg" width="100%" height="100%"/> </div> <!-- 内容区域 /--> </div> <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="../plugins/jQueryUI/jquery-ui.min.js"></script> <script> $.widget.bridge('uibutton', $.ui.button); </script> <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> <script src="../plugins/raphael/raphael-min.js"></script> <script src="../plugins/morris/morris.min.js"></script> <script src="../plugins/sparkline/jquery.sparkline.min.js"></script> <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script> <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> <script src="../plugins/knob/jquery.knob.js"></script> <script src="../plugins/daterangepicker/moment.min.js"></script> <script src="../plugins/daterangepicker/daterangepicker.js"></script> <script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script> <script src="../plugins/datepicker/bootstrap-datepicker.js"></script> <script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script> <script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script> <script src="../plugins/fastclick/fastclick.js"></script> <script src="../plugins/iCheck/icheck.min.js"></script> <script src="../plugins/adminLTE/js/app.min.js"></script> <script src="../plugins/treeTable/jquery.treetable.js"></script> <script src="../plugins/select2/select2.full.min.js"></script> <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script> <script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script> <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script> <script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script> <script src="../plugins/bootstrap-markdown/js/markdown.js"></script> <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script> <script src="../plugins/ckeditor/ckeditor.js"></script> <script src="../plugins/input-mask/jquery.inputmask.js"></script> <script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script> <script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script> <script src="../plugins/datatables/jquery.dataTables.min.js"></script> <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script> <script src="../plugins/chartjs/Chart.min.js"></script> <script src="../plugins/flot/jquery.flot.min.js"></script> <script src="../plugins/flot/jquery.flot.resize.min.js"></script> <script src="../plugins/flot/jquery.flot.pie.min.js"></script> <script src="../plugins/flot/jquery.flot.categories.min.js"></script> <script src="../plugins/ionslider/ion.rangeSlider.min.js"></script> <script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script> <script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script> <script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script> <script> $(document).ready(function () { // 选择框 $(".select2").select2(); // WYSIHTML5编辑器 $(".textarea").wysihtml5({ locale: 'zh-CN' }); }); // 设置激活菜单 function setSidebarActive(tagUri) { var liObj = $("#" + tagUri); if (liObj.length > 0) { liObj.parent().parent().addClass("active"); liObj.addClass("active"); } } $(document).ready(function () { // 激活导航位置 setSidebarActive("admin-index"); }); </script> </body> </html> <!---->
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
