AdminLTE介绍与入门

最新推荐文章于 2024-10-07 08:32:19 发布

syy567

最新推荐文章于 2024-10-07 08:32:19 发布

阅读量337

点赞数 1

分类专栏：学习笔记文章标签： 1024程序员节

本文链接：https://blog.csdn.net/syy567/article/details/109259833

版权

学习笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

这篇博客介绍了AdminLTE，一个基于Bootstrap和jQuery的开源模板主题工具，用于快速创建响应式HTML5网站。它提供了丰富的组件和多屏幕适配功能，简化了CSS和JS的编写工作。文章详细阐述了如何入门AdminLTE，包括下载资源、引入静态文件、创建项目结构，以及对导航侧栏的定制，如将菜单内容移到独立文件并进行修改，展示了逐步构建过程。

摘要由CSDN通过智能技术生成

1 AdminLTE介绍

（1）AdminLTE是什么？
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具
（2）AdminLTE有什么特点？
》》提供一系列响应的、可重复使用的组件，并内置了多个模板页面
》》自适应多种屏幕分辨率，兼容PC和移动端
》》快速的创建一个响应式的Html5网站
》》AdminLTE 不但美观，而且可以免去写很大CSS与JS的工作量

2 AdminLTE入门程序

（1）官方原版
https://adminlte.io/
https://github.com/ColorlibHQ/AdminLTE
在这里插入图片描述
（2）汉化版

下载对应资料

AdminLTE入门程序

（1）创建项目，引入css/js等静态资源
复制上述下载的资料到webapp。
（2）创建index.jsp
（3）复制模板文件代码到 index.jsp
模板代码：all-admin-datalist.html
（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
删除index.jsp里导航侧栏的原有代码，加入下列代码。

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

left_menu.jsp
将index.jsp里删除的导航侧栏代码粘贴过来。
在这里插入图片描述
保留一个li标签，并删除，只留两个子项。
此时运行，出现以下界面：