AdminLTE入门使用
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标签及其两个子项
AdminLTE入门使用相关推荐
- AdminLTE 介绍与入门
AdminLTE介绍 (1)AdminLTE是什么? AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具 (2)AdminLTE有什么特点? >>提供一系 ...
- java学习day51(AdminLTE)AdminLTE快速入门与应用
目录 简述 第一章-快速入门 第一节-概述与基本使用 第二节-快速入门案例 第二章-SSM界面 第一节-首页 第二节-登录页面 第三节-用户管理页面 第四节-角色管理页面 第五节-资源权限管理页面 第 ...
- Export_Parent父子项目之AdminLTE介绍与入门
AdminLTE介绍 (1)AdminLTE是什么? AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具 (2)AdminLTE有什么特点? >>提供一系 ...
- AdminLTE基本使用介绍
搭建环境 将AdminLTE2-IT-定制版下的release目录下的css.img.plugins目录导入到我们自己的工程中 案例代码 编译index.html页面 <!DOCTYPE htm ...
- Spring boot入门(三):集成AdminLTE(Freemarker),结合generate代码生成器,利用DataTable和PageHelper分页...
Spring boot入门(三):SpringBoot集成结合AdminLTE(Freemarker),利用generate自动生成代码,利用DataTable和PageHelper进行分页显示 标题 ...
- AdminLTE快速入门和使用(网页模板快速入门使用)
一.AdminLTE介绍 1.AdminLTE介绍 AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具,它提供了一系列响应的.可重复使用的组件,并内置了多个模板页面; ...
- 一篇文章带你快速入门 AdminLTE
文章目录 一.相关概述 二.如何使用 三.示例 一.相关概述 AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具, 它提供了一系列响应的.可重复使用的组件, 并内置了 ...
- Angular4+AdminLTE+Jeecg 前后端分离框架实战-张代浩-专题视频课程
Angular4+AdminLTE+Jeecg 前后端分离框架实战-2259人已学习 课程介绍 Angular4+AdminLTE+Jeecg 前后端分离框架实战 涉及技术点:angu ...
- AdminLTE模板框架
目录: 一.AdminLTE简介 二.AdminLTE 的基本使用 三.快速入门 一.AdminLTE简介 官网:https://adminlte.io/ AdminLTE是一个完全响应的管理模板. ...
最新文章
- 30秒或更短的时间内弄懂的有用CSS代码片段
- 循环神经网络教程3-BP算法和梯度消失问题, Part 3 – Backpropagation Through Time and Vanishing Gradients
- 谈谈 Java 的克隆
- python计算排队时间_Python(pdb)-排队执行命令
- 我是程序员,我有对象,我还可以调用别人对象!
- 6818 开发板 配置 ubuntu 桌面环境 与 ROS
- oracle linux下数据迁移到不同服务器
- 云MAS中CMPP3.0协议封装与移动短信状态报告状态码说明
- Linux 安装 Hive教程
- java有序的Map-LinkedHashMap
- 网络准入控制学习——Chap1
- 最全面的Fiddler界面讲解#工作原理#菜单栏#工具栏#底部状态栏#底部自带命令行控制台#session栏#request栏和response栏
- UnicodeDecodeError ‘gbk‘ codec can‘t decode byte 0x93 in position 6325 illegal multibyte sequence
- 回顾 | 女性 AI 专场 - 女性眼中的 ChatGPT
- 'config.h' file not found 的解决方法以及可能遇到的问题
- 排序(基于Java语言编写)
- python 中文乱码 \u5b66\u90a6\u5ba2\u6237
- 没有html的电视怎么连电脑,电脑怎么连接电视 详细步骤【图文】
- 提升10倍写作效率,这5个写作工具,文笔不好的人别错过
- arm生态发展与交叉编译链选择