AdminLTE介绍
- (1)AdminLTE是什么?
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具
- (2)AdminLTE有什么特点?
提供一系列响应的、可重复使用的组件, 并内置了多个模板页面
自适应多种屏幕分辨率,兼容PC和移动端
快速的创建一个响应式的Html5网站
AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量
AdminLTE入门
- 官方原版
https://adminlte.io/
https://github.com/ColorlibHQ/AdminLTE
- 步骤:
(1)到官网下载adminlte包,并解压
(2)打开release文件夹
(3)找到如图4个文件夹
(4)将这4个文件夹复制粘贴到项目中
AdminLTE入门程序
-
(1)创建项目,引入css/js等静态资源
-
(2)创建index.jsp
-
(3)复制模板文件
all-admin-datalist.html
代码到 index.jsp -
(4)使用项目路径
${path}
替换掉…/
…/plugins ${path}/plugins
…/css ${path}/css
…/img ${path}/img
pom.xml
<!--web基础包 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
对左侧菜单进行删除与修改
- (1)为了
页面维护方便
,将【菜单内容】移到left_menu.jsp
中,再使用include
引入当前页面 - (2)创建【企业管理】菜单
在index.jsp与left_menu.jsp中
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
pageContext.setAttribute("path",request.getContextPath());
%>
index.jsp
<!-- 导航侧栏 -->
<jsp:include page="left_menu.jsp"/>
<!-- 导航侧栏 /-->
left_menu.jsp
只保留一个li标签
,并删除其中多余的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>