一个页面布局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这两个选项不能同时使用,其他的选项可以同时使用