AdminLTE 2的布局Layout

来源:互联网 发布:程序员必看的十大电影 编辑:程序博客网 时间:2024/06/06 21:21

一个页面布局Layout的主要组成部分

AdminLTE 2中,一个页面的主布局Layout通常包含四个主要部分 :

概念 CSS类 功能 Wrapper .wrapper 包围整个页面的最外层div

典型的用法一般是body标签下面只有一个标记了class含有.wrapper的div,
然后所有的应用界面都实现在这个div里面。
Main Header .main-header 包含 logo 和 navbar

一般位于页面最顶部 Sidebar .sidebar-wrapper 包含用户面板 user panel 和侧边栏菜单 sidebar menu.

1.这里sidebar menu指的一般是出现在页面左侧用于功能导航的侧边栏菜单。
2.这里user panel指的是sidebar menu上面显示用户信息,当前状态的用户面板。
Content .content-wrapper 包含内容头部 page header 和内容 content

在AdminLTE的文档和例子中,这里的page header和content header,指的是同一个东西
Content通常位于整个页面的右下区域,是应用最主要的业务功能实现区域。


以上所提到的概念指的是一个使用了AdminLTE Layout布局功能的页面的主要组成部分。在这样的每个组成部分中,开发者可以针对需求设计不同的细节布局。但一般来讲,理解了上面的四个顶层的布局组成部分的功能,开发者能更好地理解和利用AdminLTE提供的功能。

布局Layout选项 : 使用哪种布局?

AdminLTE2提供了以下4种布局选项供开发者应用主布局。这些布局选项以CSS类class的形式存在,将它们添加到body标签上以达到想要的布局效果:

名称 CSS类 效果 Fixed .fixed 固定的Main header和Sidebar,头部水平方向总是占满页面窗口 Collapsed Sidebar .sidebar-collapse 页面加载完成时sidebar处于折叠状态 Boxed Layout .layout-boxed 内容位于浏览器窗口水平居中的一个矩形区域内,该矩形区域宽度最大1250像素 Top Navigation .layout-top-nav 去掉了侧边栏sidebar,如果需要链接功能导航,都放到头部navbar中去


!!! 注意 : layout-boxed和fixed这两个选项不能同时使用,其他的选项可以同时使用

参考内容

  1. AdminLTE官网
  2. AdminLTE官方文档
原创粉丝点击