文档章节

使用AdminLTE

momo1987
 momo1987
发布于 2016/12/06 18:19
字数 515
阅读 688
收藏 2

使用AdminLTE

AdminLTE是一个完全响应管理模板。基于Bootstrap3框架,易定制模板。适合多种屏幕分辨率,从小型移动设备到大型台式机。内置了多个页面,包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。最重要的是它是开源免费的,我们可以尽情的使用它。目前的最新版本是2.3.6,可以自行去搜索AdminLTE,官网下载使用。

使用adminlte进行页面布局需要四个主要部分:

  • .wrapper  : 页面的整体框架
  • .main-header : logo和顶部导航栏
  • .sidebar-wrapper  :  包含用户面板和侧边导航栏
  • .content-wrapper  :  包含页面和内容主体部分

adminlte有一些 用于各种布局的类名,可以将这些类中的每一个添加到dom标签 以获得所需的布局效果。

  • 使用 .fixed 固定得到一个固定的头和侧边栏。 
  • 使用类.sidebar-collapse 加载时有一个边栏。 
  • 使用类 .layout-boxed  得到 只有1250px的盒子。 
  • 使用类 .layout-top-nav  去除边栏顶部导航栏并在顶部导航栏有链接

 将AdminLTE相关核心文件添加至项目

在wwwroot下添加js、css、images三个文件夹。

1 将/AdminLTE-2.3.6/dist/js下的app.js及app.min.js两个文件拷贝至wwwroot/js文件夹下。

2 将/AdminLTE-2.3.6/dist/css下的所有文件拷贝至wwwroot/css文件夹下。

3 将/AdminLTE-2.3.6/dist/img下的所有文件拷贝至wwwroot/images文件夹下。

1.AdminLTE的必要配置文件


<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 --> 
<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx}/assets/font/Hui-iconfont/1.0.7/iconfont.css">
<!-- Theme style -->
<link rel="stylesheet" href="${ctx}/assets/css/AdminLTE.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="${ctx}/assets/css/skins/_all-skins.min.css">

 

http://www.cnblogs.com/Leo_wl/p/5863201.html

 http://www.cnblogs.com/cryst/p/6001364.html

http://caijt.com/2016/01/17/377/

http://www.cnblogs.com/cryst/p/6001364.html

中文版:http://adminlte.la998.com/

© 著作权归作者所有

共有 人打赏支持
momo1987
粉丝 1
博文 52
码字总数 12135
作品 0
深圳
免费的Bootstrap Admin Template并具有教学

说明 作为程序员最近一直在写页面,直接用Boostrap一直感觉虽然像搭建积木一样,但是整体风格总是很奇怪,随即随便搜搜发现AdminLTE。之前搜索过这个免费的模板,但当时没有教学,并且个人对...

抢小孩糖吃
2015/11/15
0
0
最值得拥有的免费Bootstrap后台管理模板

在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能。使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间。下面P...

52117354
09/11
0
0
AdminLTE中我的菜单太长了,能不能实现点击菜单之后出现最小化菜单页面的悬停事件那样子的样式。

AdminLTE中我的菜单太长了,能不能实现点击菜单之后出现最小化菜单页面的悬停事件那样子的样式。这样更加好选择我地菜单分了六级,如果不这样操作的话很麻烦,而且主菜单也有很多默认打开太难...

华鑫锋
05/10
0
0
极速后台开发框架 - xzyn

xzyn5.1 极速后台开发框架,基于ThinkPHP5.1.10+Bootstrap开发。 主要特性 基于Auth验证的权限管理系统 支持无限级父子级权限继承,父级的管理员可任意增删改子级管理员及权限设置 支持单管理...

戏中有你
05/08
0
0
cjbi/wetech-admin

Wetech-Admin Wetech-Admin 是基于Maven+Spring+SpringMVC+Mybatis的轻量级后台管理系统,适用于中小型项目的管理后台,支持按钮级别的权限控制,系统具有最基本的用户管理、角色管理、资源管...

cjbi
04/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
51
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
44
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
50
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
48
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
49
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部