AdminLTE介绍
(1)AdminLTE是什么?
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具
(2)AdminLTE有什么特点?
1.提供一系列响应的、可重复使用的组件, 并内置了多个模板页面
2.自适应多种屏幕分辨率,兼容PC和移动端
3.快速的创建一个响应式的Html5网站
4.AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量
AdminLTE入门程序
首先下载AdminLTE
官方原版:https://adminlte.io/ https://github.com/ColorlibHQ/AdminLTE
下载后文件夹如图
入门使用只需要用到release/dist
目录下的四个文件就行
打开后文件夹如图
新建一个web项目
(1)创建项目,引入css/js等静态资源
大致如图
(2)创建index.jsp
(3)复制模板文件代码到 index.jsp
all-admin-datalist.html
(4)使用项目路径${path}替换掉 …/
…/plugins ${path}/plugins
…/css ${path}/css
…/img ${path}/img
(5) 导入web基础包依赖
<!--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>
这时候便可以使用AdminLTE中的模板了,但需要注意引入静态资源路径的时候加上项目路径。
入门练习
- 复制release/dist/pages下的all-admin-datalist.html到index.jsp中当模板
需要加入jsp的头文件
`<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>`
2.在jsp中获取当前项目路径:
<% pageContext.setAttribute("path",request.getContextPath()); %>
然后通过Ctrl+Shift+R一键替换将当前项目路径path替换掉…/plugins比如将…/plugins替换为${path}/plugins,css和img也是同样操作(如果出现静态资源载入出错,极有可能是路径出错。)
效果大致如图
对左侧菜单进行删除与修改
1.找到左侧菜单栏相关代码,将其全部剪切,重新建立一个left_menu.jsp页面放进去(方便以后管理和修改)
2.按照显示的内容对其进行修改删除增加就行。然后测试显示就行,其他位置的也拉出来进行修改就可以。
拉出来之后,主页面index.jsp需要引入左侧菜单栏页面
<%--导入左侧菜单栏 --%>
<jsp:include page="left_menu.jsp"/>
如图只保留一个li标签及其两个子项