企业权限管理系统之AdminLTE的基本介绍(一)
文章目录
(一)AdminLTE介绍
(二)AdminLTE基本使用介绍
(三)AdminLTE使用示例：首页
(四)AdminLTE使用示例：左侧菜单栏
(五)AdminLTE使用示例：产品添加
(一)AdminLTE介绍
AdminLTE是一款建立在Bootstrap3和JQuery1.11+之上的开源的模板主题工具，它提供了一系列响应的、可重复使用的组件， 并内置了多个模板页面，同时自适应多种屏幕分辨率，兼容PC和移动端。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站。
AdminLTE框架在网页架构与设计上，有很大的辅助作用， 尤其是前端架构设计师，用好AdminLTE 不但美观，而且可以免去写很大CSS与JS的工作量。
下载下来后，随便打开一个index.html文件即可，如下：
上面这个是英文版，下面介绍黑马汉化版，如下：
注意：我们只需要关注release文件夹下的内容
AdminLTE布局与皮肤介绍如下：
布局
.wrapper：包住了body下的所有代码
.main-header：里面是网站的logo和导航栏的代码
.main-sidebar：里面是用户面板和侧边栏菜单的代码
.content-wrapper：里面是页面和内容区域的代码
.main-footer：里面是页脚的代码
.control-sidebar：里面是页面右侧侧边栏区域的代码布局选项
fixed：固定
layout-boxed：盒子布局
layout-top-nav：顶部隐藏
sidebar-collapse：侧边栏隐藏
sidebar-mini：侧边栏隐藏时有小图标皮肤
skin-blue：蓝色
skin-black：黑色
skin-purple：紫色
skin-yellow：黄色
skin-red：红色
skin-green：绿色
以上项我们可以查看start.html页面中查看
(二)AdminLTE基本使用介绍
在HBuilder新建一个Web项目，如下：
把它自带的文件全部删掉，如下：
然后把pages除外的其它文件夹都拷贝到HBuilder中，如下：
我们自己新建一个HTML页面，如下：
需求：把下面这个页面的代码拷贝到我们上面创建的HTML文件中，如下：
CTRL+R运行，因为路径的问题，所以运行结果会不理想，如下：
我们创建一个pages文件夹，并且把demo.html拖拽进去，如下：
（或者CTRL+F，把所有的../改成./）
再次运行就可以了，如下：
(三)AdminLTE使用示例：首页
预期效果如下：
图片素材如下：
把上面的图片放到img文件夹下面，如下：
把刚才的demo.html复制一份，重命名为index.html，如下：
中间的内容区域全部不要，只留一张刚才的图片，效果如下：
(四)AdminLTE使用示例：左侧菜单栏
接下来修改左侧菜单栏，我们只保留前面三项，后面的全部删掉，如下：
只要把不需要的删掉即可，如下：
修改项的名称，如下：
把系统操作的部分子项删掉，如下：
再对剩下的子项做修改，如下：
再对基础数据做同样的操作，这里不再展示，效果如下：
最后修改一下菜单栏每一项的图标，可以在all-elements-icons.html中找到我们想要的图标，如下：
在下面这里替换掉class样式就可以了
(五)AdminLTE使用示例：产品添加
预期效果如下：
复制一份index.html，重命名为product-add.html，如下：
我们同样只需要对内容区域进行修改，同样可以在all-elements-icons.html中找到我们要的模板，如下：
把代码复制到内容区域，如下：
效果如下：
（把<h5>四列 , 行两个项目</h5>去掉）
但是我们会发现信息是写死的，我们无法输入信息，如下：
是因为它没有<input>标签，我们看看代码，如下：
我们不需要自己写<input>标签，我们会抄就可以，打开all-elements-icons.html去找一个可以输入文字的框框，然后找到源码复制过来我们的工程，如下：
效果如下：
我们再抄一个日期控件，如下：
我们会发现没有起效果，因为它用的不是原生样式，如下：
我们要找到它自定义的样式，并且复制过来，如下：
可以稍作调整，如下：
效果如下：
企业权限管理系统之AdminLTE的基本介绍(一)相关推荐
- 毕业设计-课程设计-Spring+SpringMVC+Mybatis项目—企业权限管理系统（1）
JavaEE:Spring+SpringMVC+Mybatis项目-企业权限管理系统 首先给出项目演示地址:http://www.youngxy.top:8080/SSM/ 项目架构图: 一:功能需求 ...
- SSM 企业权限管理系统 项目实战
企业权限管理系统 完整项目github地址: https://github.com/lindaifeng/Authority-Management-System 新增项目: SpringBoot企业权 ...
- SSM框架整合（企业权限管理系统）
项目简介 基于Spring.SpringMVC.Mybatis框架整合的权限管理系统,主要技术是运用了SpringSecurity框架对用户访问页面的某些模块设置权限,具体可以看下文权限控制核心内容. ...
- 基于RBAC模型的通用企业权限管理系统
1. 为什么我们需要基于RBAC模型的通用企业权限管理系统 管理信息系统是一个复杂的人机交互系统,其中每个具体环节都可能受到安全威胁.构建强健的权限管理系统,保证管理信息系统的安全性是十分重要的.权限 ...
- 黑马ssm学习笔记-企业权限管理系统
课程介绍 SVN(功能类似GIT) AdminLTE前端模板 https://github.com/itheima2017/adminlte2-itheima 课程安排 1. 在数据库中建表 创建触发 ...
- 企业权限管理系统---用户模块
用户角色权限表关系 使用数据库完成springSecurity用户登录验证 springSecurity的使用步骤: 1.在web工程的pom.xml文件下导入依赖 <!--Spring Sec ...
- Spring+SpringMVC+Mybatis项目—企业权限管理系统（2）
一:商品查询功能 1.1DAO 1.2业务层 1.3表现层 二:订单查询 1.1DAO 1.2业务层 1.3表现层 三:订单分页 四:Spring Security的使用 五:用户管理 1.1DAO ...
- 企业权限管理系统之角色操作资源权限管理(八)
文章目录 (一)角色操作:查询所有角色(流程分析) (二)角色操作:查询所有角色(代码实现) (三)角色操作:添加角色(流程分析) (四)角色操作:添加角色(代码实现) (五)角色操作:角色详情查询 ...
- 企业权限管理系统第4章--订单操作
本章需求 查询所有订单 订单分页查询 查询订单详情 表关系分析 orders和product是:一对一,这里是旅游产品,一个旅游套餐对应一张订单表. orders和member是:一对一,一张订单对应 ...
- 企业权限管理系统第3章--产品操作
本章需求 查找所有产品的操作 添加产品的操作 查询所有产品流程 添加产品流程 数据库与表结构 product表 序号 字段名称 字段类型 字段描述 1 id varchar2(32) 无意义,主键uu ...
最新文章
- 操作系统常用词典（二）
- C++编程语言之Lambda 函数与表达式
- js笔记之Math random()、ceil()、floor()、round()
- 使用VNC访问Linux桌面
- 运行yum时出现错误，缺失libsasl2.so.2文件
- github搜索技巧_和逛知乎、刷微博一样高效使用 GitHub
- php列表代码怎么做的,php项目实战：代码讲解之订单列表问题
- Android之AbsoluteLayout(绝对布局)
- python入门指南by许半仙-推文：拯救书荒（短篇小甜饼合集）
- 仿QQ局域网聊天软件
- 毕业5年决定你的一生
- 解决git push 中remote: Permission to xxxxx.git denied to xxx. fatal: unable to acce
- Linux应用开发5 信号（软中断，处理异步请求，进程间通讯）
- Sed 流文本编辑器
- Wake-on-LAN(远端唤醒) 原理及实现
- 计算机类专业学习难度排行,全国33所名校计算机专业考研跨考难度系数排名
- 萌新做点小玩意儿DAY-15 线性表（顺序表）及其应用
- Jump lattice 跳格子
- 英语学习思路【罗肖尼Shawney】
- 我在京东的第417天：陷入了情绪的泥沼