文章目录
AdminLTE介绍
(1)AdminLTE是什么?
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具。
(2)AdminLTE有什么特点?
- 提供一系列响应的、可重复使用的组件, 并内置了
多个模板页面
- 自适应多种屏幕分辨率,兼容
PC
和移动端
- 快速的创建一个
响应式
的Html5网站 - AdminLTE 不但美观, 而且可以
免去写很大CSS与JS的工作量
(3)下载
- 官方原版
https://adminlte.io/
https://github.com/ColorlibHQ/AdminLTE - 汉化版
目录结构:
只需要使用以下的四个文件就行
大概样式:
AdminLTE入门程序
(1)创建项目,引入css/js等静态资源
(2)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>
(3)创建index.jsp
复制模板文件all-admin-datalist.html代码到 index.jsp
- 注:需加入
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
(4)报错–>路径
如果在加载访问出现了404错误,可能是css/js/plugins引用路径出现了错误
解决办法:
使用项目路径${path}替换掉 …/
…
/plugins
----->${path}/plugins
…/css
----->${path}/css
…/img
----->${path}/img
(5)对左侧菜单进行删除与修改
- (1)为了页面维护方便 将【菜单内容】移到left_menu.jsp中,再使用include引入当前页面
- (2)创建【企业管理】菜单
index.jsp
<!-- 导航侧栏 -->
<jsp:include page="left_menu.jsp"/>
<!-- 导航侧栏 /-->
效果展示: