JavaWeb day31-AdminLTE

什么是AdminLTE

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具

优点

• 提供一系列响应的、可重复使用的组件， 并内置了多个模板页面
• 自适应多种屏幕分辨率，兼容PC和移动端
• 快速的创建一个响应式的Html5网站
• AdminLTE 不但美观， 而且可以免去写很大CSS与JS的工作量

可从官网获取

https://adminlte.io/
https://github.com/ColorlibHQ/AdminLTE

入门示例

1. 首先在官网下载工具（这里用的是汉化版）
   
2. 找到/release/dist目录下的素材包
   
3. 创建一个简单的web项目，拷贝素材包
   
4. 由于原来的路径读不出图片效果，需要进行修改
   引入
   <% pageContext.setAttribute("path",request.getContextPath());%>
   获取绝对路径

更改地址（部分地址如下所示）

<link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${path}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${path}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="${path}/plugins/iCheck/square/blue.css">
<link rel="stylesheet" href="${path}/plugins/morris/morris.css">
<link rel="stylesheet" href="${path}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="${path}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="${path}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="${path}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="${path}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="${path}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet" href="${path}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet" href="${path}/plugins/select2/select2.css">
<link rel="stylesheet" href="${path}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="${path}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">

5. 优化界面
   将左侧菜单不必要的选项去掉，未防止影响原界面，创建一个新的jsp
   
   找到负责左边菜单的标签，并剪切到left_menu.jsp
   
   去掉不必要选项，保留我们想要的部分

<ul class="sidebar-menu">
    <li class="header">菜单</li>

    <li id="admin-index"><a href="all-admin-index.html"><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="all-admin-login.html">
                    <i class="fa fa-circle-o"></i> 企业列表
                </a>
            </li>

            <li id="admin-register">
                <a href="all-admin-register.html">
                    <i class="fa fa-circle-o"></i> 企业注册
                </a>
            </li>



        </ul>
    </li>

在主界面原标签处引入jsp

    <!-- 导航侧栏 -->
<jsp:include page="left_menu.jsp"/>

6. 效果展示