先介绍一下AdminLTE的官方网站:AdminLTE官方网站 和GitHub:AdminLTE的github,可以在上面自行下载。

AdminLTE 是一个完全响应管理模板,主要依赖于 Bootstrap 3、jQuery 1.11+ 这两个框架,插件中使用的基本都是Bootstrap和jQquery插件。

AdminLTE自带JQuery和Bootstrap3框架,所以不需要再另外下载。

starter.html是 AdminLTE 建议用来作为起点的参考示例,在此基础上做开发会快很多,build目录中包含未编译过的JS,CSS文件,dist目录中包含编译过的JS,CSS文件,还提供了很多压缩版本,plugins目录中存放依赖第三方插件的CSS和JS文件,pages页面下就是一些页面。

  常用类:

    1. Layout

      .wrapper //将页面上的元素都包裹其中

      .main-header //header,包含logo和navbar

      .main-sidebar//aside,sidebar菜单

      .content-wrapper //div,主体

    2.navbar

      .navbar-static-top //滚动

      .navbar-fixed-top //固定

      .navbar-fixed-bottom //固定

  

|---------------------------------------------------------|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|---------------------------------------------------------|
 

skin-blue中的 blue 蓝 修改的是标题的颜色

  AdminLTE提供的默认皮肤颜色有:

    蓝 skin-blue skin-blue-light

    黄 skin-yellow skin-yellow-light  

    绿 skin-green skin-green-light

    紫 skin-purple skin-purple-light

    红skin-red  skin-red-light

    字体黑,皮肤白  skin-black skin-black-light

|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|---------------------------------------------------------|
  .fixed 只是为了固定导航栏
  .layout-boxed    只是将页面包含在一个固定盒子中,max-width最大宽度: 1250px;
  注意:当fixed布局和layout-boxed布局一起使用时,layout-boxed样式不会生效,只有fixed布局会生效
       .sidebar-collapse  让侧边栏默认是隐藏状态
  .layout-top-nav   将导航栏设置为单纯的导航菜单,不使用侧边栏
  .sidebar-mini 让侧边栏和左侧导航一起折叠,并且最小化是小图标。
  注意:sidebar-mini一般和Fixed layout-boxed sidebar-collapse 一起配合使用,因为layout-top-nav布局的目的就是不要侧边栏
 
  

  上图 body样式中去掉 sidebar-mini,点击下图按钮效果如下图:

body 属性加上sidebar-mini 之后,点击sidebar toggle button,logo-lg隐藏,logo-mini显示

效果如下图所示:

  右侧菜单项

main-sidebar  左侧菜单导航
  .sidebar-menu 菜单目录容器
 

最近项目需要用到AdminLTE,所以整理一份中文版的小教程的更多相关文章

  1. 【ASP.NET Core分布式项目实战】(三)整理IdentityServer4 MVC授权、Consent功能实现

    本博客根据http://video.jessetalk.cn/my/course/5视频整理(内容可能会有部分,推荐看源视频学习) 前言 由于之前的博客都是基于其他的博客进行开发,现在重新整理一下方便 ...

  2. 开源 iOS 项目分类索引大全 - 待整理

    开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...

  3. 用eclipse开发项目时遇到的常见错误整理,和配套解决方案(1)

    01. MyEclipse项目导入eclipse后,怎么发布不了? 今天导入了之前的一个MyEclipse项目,更改jdk后,发现发布不了.解决方案如下: 打开项目根目录,找到.settings文件夹 ...

  4. jqgrid项目使用记录/注释版/未整理/

    jqgrid项目使用笔记function loadActData(){ $("#actGridTable").clearGridData();//首先清空表格内容 var url ...

  5. (转载) VS编译duilib项目时候的错误解决方法整理

    原文地址:http://blog.csdn.net/x356982611/article/details/30217473 @1:找不到Riched20.lib 用everything等软件搜索下磁盘 ...

  6. VS编译duilib项目时候的错误解决方法整理(转载)

    转载自:http://blog.csdn.net/x356982611/article/details/30217473 @1:找不到Riched20.lib 用everything等软件搜索下磁盘, ...

  7. VS编译duilib项目时候的错误解决方法整理

    @1:找不到Riched20.lib 用everything等软件搜索下磁盘.找到所在的文件夹加入到vs的库文件夹就可以.我得是C:\Program Files (x86)\Microsoft SDK ...

  8. ESA2GJK1DH1K开发教程: 来看看最新整理的整个开发板的教程大纲吧

    项目开发:教程大纲(测试板型号:ESA2GJK1DH1K) 购买链接: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911deb ...

  9. 整理eclipse,升级jdk环境小记录

    这2天在整理项目: 需要把eclipse 32位,jdk1.6 32位的更改为eclipse 64位,jdk1.8 64位版本的,于是我就在一台window7的电脑上直接操作,遇到了一下几点问题,记录 ...

随机推荐

  1. 安装lombok

    1. lombok的jar包路径 wangfei@DESKTOP-8AT8HRO MINGW64 /d/gradle-3.4.1/caches/modules-2/files-2.1/org.proj ...

  2. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_命名空间和程序集的关系

    命名空间和程序集不一定相关 1. 同一个命名空间中的各个类型可能是在不同的程序集中实现的.(System.IO.FileStream在MSCorLib.dll程序集中,而System.IO.FileS ...

  3. Photoshop在网页设计中的应用与方法

    1.图像局部截取和图像尺寸调整 做网页设计时经常要用到的某张图像一部分,这就需要截取图像的局部.图像局部截取的方法很多,但使用Photoshop操作起来更方便.具体操作步骤如下: (1)在Photos ...

  4. 简述wcf应用

    一.新建wcf 如下图:wcf可以简历俩种形式 1.库文件,就是一个类库文件,可以用windows服务或控制台开启. 2.服务应用程序,可以直接IIS上面发布. 二.库文件自动生成的类 接口类 usi ...

  5. SecureCRT 遇到一个致命的错误且必须关闭

    1.将报错路径中VanDyke文件夹内的东西删除掉2.运行regedit,在注册表中将HKEY_LOCAL_MACHINA中SOFTWARE里的VanDyke删除3.注册表中打开HKEY_CURREN ...

  6. ERROR:105: Unable to locate a modulefile for 'xxx'

    查看可用的 module:module avail 将xxx替换为屏幕输出中已有的模块.

  7. Kafka Intro - Configuration

    #Notes: /opt/kafka/config/zookeeper.properties sample # the directory where the snapshot is stored.d ...

  8. 性能测试工具LoadRunner20-LR之Controller Service-Level Agreement(服务水平协议)

    SLA是为负载测试场景定义的具体目标.例如,评测脚本中任意数量事务的平均响应时间,可以定义具体的目标或阈值.测试运行结束之后,LR将你定义的目标与实际录制的平均事务响应时间进行比较.如果实际的平均事务 ...

  9. [转]LazyLoad.js及scrollLoading.js

    本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...

  10. ThreadPoolExecutor的三种队列SynchronousQueue,LinkedBlockingQueue,ArrayBlockingQueue

    SynchronousQueue SynchronousQueue是无界的,是一种无缓冲的等待队列,但是由于该Queue本身的特性,在某次添加元素后必须等待其他线程取走后才能继续添加:可以认为Sync ...