最近项目须要用到AdminLTE,因此整理一份中文版的小教程

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

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

AdminLTE自带JQuery和Bootstrap3框架,因此不须要再另外下载。github

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

   经常使用类:框架

    1. Layoutide

 

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

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

      .main-sidebar//aside,sidebar菜单网站

      .content-wrapper //div,主体ui

    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 菜单目录容器
 

 

 

相关文章
相关标签/搜索