前面提到了，但是我想只有我再过一遍才会更有点感觉吧。
B-JUI仅有一个主页面（document），框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上（这个我的感觉是获取了子页面的重要成分然后在主页面对应部分重新的构建），外部页面则通过iframe嵌入主页面。
主页面的文档格式：
html5文档格式。（b-jui框架参考了bootstrap）
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
主页面中的Body部分的结构：
主页面由上（页头）、中左（导航菜单）、中右（工作区）、下（页脚）四部分组成，左侧导航栏可收缩。示例如下：
<header id="bjui-header"> <!-- logo --><!-- 快捷菜单(消息、用户信息、切换皮肤) --> <div id="bjui-hnav"> <!-- 横向菜单 --> </div> </header> <div id="bjui-container" class="clearfix"> <div id="bjui-leftside"> <!-- 导航栏 --> </div> <div id="bjui-navtab" class="tabsPage"> <!-- 工作区(navtab) --> </div> </div> <footer id="bjui-footer"> <!-- 页脚 --> </footer>
也就是说我们使用该框架开发的主页面的结构都是基于这个模型。注意：这些id，class属性是有意义的，是不能胡乱更改的，不过就是外面的框的地方需要固定而已。
其实经过我的简单测试，我发现使用示例的主页面ajax装载子页面的内容会出错，但我感觉一个框架肯定不会让我们的页面设计80%以上都是一模一样的。
子页面（页面片段）的页面结构的要求就没有主页面这么多了。
通常由三部分组成，也可只保留bjui-content部分。一个标准的界面结构如下：
<div class="bjui-pageHeader"> <!-- 顶部模块[如：功能按钮、搜索面板] --> </div> <div class="bjui-pageContent"> <!-- 内容区 --> </div> <div class="bjui-pageFooter"> <!-- 底部模块[如：工具条、分页组件] --> </div>
两个注意点：
1、在标准结构中，bjui-pageHeader和bjui-pageFooter是固定在页面中的，bjui-pageContent的内容溢出结果是出现滚动条。
2、bjui-pageContent默认的padding是10px，如果是table不需要padding的话class属性加上tableContent。
第一点注意有感觉，第二点暂时没有遇到，遇到了补充案例。