AdminLTE的介绍与使用（详细流程）-----前端框架

---

---

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"/>
    <!-- 导航侧栏 /-->

效果展示：