这货基于Bootstrap 3（提供了统一的样式，覆盖了默认的），所以官方建议先搞懂Bootstrap 3再说。

# 布局 Layout

布局由四个主要部分组成：

  • Wrapper (.wrapper)。一个div，用来包裹整个站点。
  • Main Header (.main-header)。包含logo和导航条。
  • Sidebar (.sidebar-wrapper)。包含用户面板和sidebar菜单。
  • Content (.content-wrapper)。包含页面头部和内容。

布局选项 Layout Options

AdminLTE 2.0 为这些layout提供了一些选项。下面每个class都可以添加到<body />上面，以获取需要的结果。

  • Fixed（固定的）：使用class (.fixed) 来得到一个固定的header和sidebar。
  • Collapsed Sidebar（收敛的侧边栏）：使用class (.sidebar-collapse)来在加载时得到一个收敛的侧边栏（就是加载后默认侧边栏缩起来）。
  • Boxed Layout（盒型布局）：使用class (.layout-boxed) 来得到一个盒型布局 -- 仅会伸展到1250px。
  • Top Navigation（顶部导航）：使用class (.layout-top-nav)来移除侧边栏，并在顶部导航条显示连接。

需要注意，不能同时使用layout-boxed和fixed。其他的都可以混合使用。

<body class="skin-blue sidebar-mini">...</body>

皮肤 Skins

位于 dist/css/skins 文件夹下面。将相应的class添加到<body /> 就会改变模板的显示。

所有皮肤的class如下：

skin-black-light, skin-black-light.min, skin-black, skin-black.min, skin-blue-light, skin-blue-light.min, skin-blue, skin-blue.min, skin-green-light, skin-green-light.min, skin-green, skin-green.min, skin-purple-light, skin-purple-light.min, skin-purple, skin-purple.min, skin-red-light, skin-red-light.min, skin-red, skin-red.min, skin-yellow-light, skin-yellow-light.min, skin-yellow, skin-yellow.min
<body class="skin-blue sidebar-mini">...</body>

# AdminLTE Javascript Options

可以通过以下途径来修改 AdminLTE 的 app.js：

编辑 app.js

在js文件中，修改 $.AdminLTE.options 对象。

定义 AdminLTEOptions

定义一个全局选项变量，名字是 AdminLTEOptions，然后在加载 app.js 之前初始化它。

例：

<script>

  var AdminLTEOptions = {

    //Enable sidebar expand on hover effect for sidebar mini

    //This option is forced to true if both the fixed layout and sidebar mini

    //are used together

    sidebarExpandOnHover: true,

    //BoxRefresh Plugin

    enableBoxRefresh: true,

    //Bootstrap.js tooltip

    enableBSToppltip: true

  };

</script>

<script src='dist/js/app.js' type='text/javascript'></script>

可用的 AdminLTE 选项

{

  //Add slimscroll to navbar menus

  //This requires you to load the slimscroll plugin

  //in every page before app.js

  navbarMenuSlimscroll: true,

  navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar

  navbarMenuHeight: "200px", //The height of the inner menu

  //General animation speed for JS animated elements such as box collapse/expand and

  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,

  //'fast', 'normal', or 'slow'

  animationSpeed: 500,

  //Sidebar push menu toggle button selector

  sidebarToggleSelector: "[data-toggle='offcanvas']",

  //Activate sidebar push menu

  sidebarPushMenu: true,

  //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)

  sidebarSlimScroll: true,

  //Enable sidebar expand on hover effect for sidebar mini

  //This option is forced to true if both the fixed layout and sidebar mini

  //are used together

  sidebarExpandOnHover: false,

  //BoxRefresh Plugin

  enableBoxRefresh: true,

  //Bootstrap.js tooltip

  enableBSToppltip: true,

  BSTooltipSelector: "[data-toggle='tooltip']",

  //Enable Fast Click. Fastclick.js creates a more

  //native touch experience with touch devices. If you

  //choose to enable the plugin, make sure you load the script

  //before AdminLTE's app.js

  enableFastclick: true,

  //Control Sidebar Options

  enableControlSidebar: true,

  controlSidebarOptions: {

    //Which button should trigger the open/close event

    toggleBtnSelector: "[data-toggle='control-sidebar']",

    //The sidebar selector

    selector: ".control-sidebar",

    //Enable slide over content

    slide: true

  },

  //Box Widget Plugin. Enable this plugin

  //to allow boxes to be collapsed and/or removed

  enableBoxWidget: true,

  //Box Widget plugin options

  boxWidgetOptions: {

    boxWidgetIcons: {

      //Collapse icon

      collapse: 'fa-minus',

      //Open icon

      open: 'fa-plus',

      //Remove icon

      remove: 'fa-times'

    },

    boxWidgetSelectors: {

      //Remove button selector

      remove: '[data-widget="remove"]',

      //Collapse button selector

      collapse: '[data-widget="collapse"]'

    }

  },

  //Direct Chat plugin options

  directChat: {

    //Enable direct chat by default

    enable: true,

    //The button to open and close the chat contacts pane

    contactToggleSelector: '[data-widget="chat-pane-toggle"]'

  },

  //Define the set of colors to use globally around the website

  colors: {

    lightBlue: "#3c8dbc",

    red: "#f56954",

    green: "#00a65a",

    aqua: "#00c0ef",

    yellow: "#f39c12",

    blue: "#0073b7",

    navy: "#001F3F",

    teal: "#39CCCC",

    olive: "#3D9970",

    lime: "#01FF70",

    orange: "#FF851B",

    fuchsia: "#F012BE",

    purple: "#8E24AA",

    maroon: "#D81B60",

    black: "#222222",

    gray: "#d2d6de"

  },

  //The standard screen sizes that bootstrap uses.

  //If you change these in the variables.less file, change

  //them here too.

  screenSizes: {

    xs: 480,

    sm: 768,

    md: 992,

    lg: 1200

  }

}

# 组件 Components

AdminLTE-2.2.0 学习的更多相关文章

  1. Servlet3.0学习总结——基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...

  2. solr6.0学习

    solr6.0学习(一)环境搭建准备工作:目前最新版本6.0.下载solr 6.0:Solr6.0下载JDK8 下载jdk1.8:jdk1.8[solr6.0是基于jdk8开发的]tomcat8.0 ...

  3. DirectX 总结和DirectX 9.0 学习笔记

    转自:http://www.cnblogs.com/graphics/archive/2009/11/25/1583682.html DirectX 总结 DDS DirectXDraw Surfac ...

  4. [EntLib]微软企业库5.0 学习之路——第一步、基本入门

    话说在大学的时候帮老师做项目的时候就已经接触过企业库了但是当初一直没明白为什么要用这个,只觉得好麻烦啊,竟然有那么多的乱七八糟的配置(原来我不知道有配置工具可以进行配置,请原谅我的小白). 直到去年在 ...

  5. Bootstrap3.0学习14

    Bootstrap3.0学习第十四轮(分页.徽章)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...

  6. Bootstrap3.0学习第八轮

    Bootstrap3.0学习第八轮(工具Class)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/34 ...

  7. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  8. Bootstrap3.0学习第三轮(栅格系统案例)

    Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...

  9. 一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移

    不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.superviso ...

  10. Lucene.net(4.8.0) 学习问题记录五: JIEba分词和Lucene的结合，以及对分词器的思考

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

随机推荐

  1. Java三大框架的配置

    1. 首先是spring,右键项目-myeclipse-capabilitise-install spring etc.类似的就好,生成applicationContext.xml和spring一些类 ...

  2. 第六百一十八天 how can I 坚持

    此刻好烦,乱七八糟的,红米2死机也没弄好,哎. 下周三去长城,感觉还有很大提升空间啊,什么都不会.哎. 眼累的不行了,得抓紧睡觉了.ls他们来北京开年会了.. 明天,zjp来找我玩呢. 睡觉了.累.

  3. eclipse中jsp文档无语法着色，安装Eclipse Java Web Developer Tools插件

    一.安装Eclipse Java Web Developer Tools插件 1.eclipse菜单:help/install New Software,打开Available Software窗体: ...

  4. Replace Pioneer 注册

    批量文本替换工具,Replace Pioneer 注册:http://www.mind-pioneer.com

  5. Delphi2010 DataSnap入门

    DataSnap到了Delphi2010有了很大的变化,已经可以完全抛弃DCOM之类的东西了,在以前版本中建立一个DataSnap,需要使用DCOMConnection或者SockConnection ...

  6. Acadia Lab 203 + Lab 231

    在做完 Lab 6 之后,惊觉选做实验缺口很大,于是遍历了一遍夏任务,找到了一条最省力的路线. 做完 Lab 6 的连线不用拆,可以接下来做以下两个实验: Lab 203 网络时钟 核心代码如下: v ...

  7. 仿东软OA协同办公服务管理系统

    兼容IE6,7,8以上.GooleChrome.360及遨游等浏览器.系统特色:1.系统经过抗压测试.2.语音提示功能.3.支持office2007在线编辑.4.强大的图形化工作流程设计及文档编辑留痕 ...

  8. oracle 异常

    ORACLE 异常错误处理 本篇主要内容如下: 5.1 异常处理概念 5.1.1 预定义的异常处理 5.1.2 非预定义的异常处理 5.1.3 用户自定义的异常处理 5.1.4  用户定义的异常处理 ...

  9. nullcon HackIM 2016 -- Crypto Question 1

    You are in this GAME. A critical mission, and you are surrounded by the beauties, ready to shed thei ...

  10. 运行easy_install安装python相关程序时提示failed to create process

    运行easy_install安装python相关程序时提示failed to create process,因为安装了两个python,卸载了的那个目录没删除,删除了另外的python目录后这个问题就 ...