页面结构

B-JUI仅有一个主页面(document)，框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上，外部页面则通过iframe嵌入主页面， 本节介绍 B-JUI的主页面结构。

HTML5 文档类型

同Bootstrap， B-JUI使用 HTML5 文档类型，参照下面的格式进行设置。

                <!DOCTYPE html>
                <html lang="zh-CN">
                  ...
                </html>

主页面结构(仅body部分)

主页面由上（页头）、中左（导航菜单）、中右（工作区）、下（页脚）四部分组成，其中左侧导航菜单可收缩。结构如下：

子页面（即页面片段[后面简称：页片]）结构

页片通常由两部分组成，也可以只保留bjui-pageContent部分，其中bjui-pageContent部分可选bjui-headBar（顶部工具条）和bjui-footBar（底部工具条）。结构如下：
  • data-layout-h 属性表示该容器为页片自适应布局，当值为0时，B-JUI会为该容器的高度自动赋值为：本页片总高度减去本页片中的固定元素(bjui-pageHeader\bjui-headBar\bjui-footBar)高度。
  • data-layout-h 属性值不等于0时，该容器高度为本页片总高度减去属性值。
  • 需要自定义固定元素(块级元素有效)，请为该元素添加属性data-layout-fixed="true"