AdminLTE 2的布局Layout

一个页面布局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官方文档
  3. AdminLTE 2的组件Component
  4. Springboot + WebJars + AdminLTE 2 : HelloWorld 项目
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值