本框架分为上下格局及左右格局,一切基于Jquery、Zui 一切Zui代码皆可用
IE上的兼容性(当前更改仅适用于 浏览器模式:IE9,文档模式:IE9标准)

首页基本布局:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实验上下分布格局</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="Zui/css/zui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="Zui/css/main.css">
    <link rel="stylesheet" href="Zui/css/main-color.css">
    <!--IE8只能支持jQuery1.9-->
	<!--[if lte IE 8]>
	<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
	<![endif]-->
	<!--[if lt IE 9]>
		<script src="jquery-1.9.0.js">
	<![endif]-->

     <!--[if lt IE 9]>
	  <script src="dist/lib/ieonly/html5shiv.js"></script>
	<![endif]-->
	<!--[if lt IE 9]>
	  <script src="dist/lib/ieonly/respond.js"></script>
	<![endif]-->
	<!--[if lt IE 9]>
	  <script src="dist/lib/ieonly/excanvas.js"></script>
	<![endif]-->
</head>
<body>
<!--[if lt IE 8]>
    <div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
  <![endif]-->
<div class="fill">
	<div class="row fill">
		<div class="col-md-12 column top row" style="height: 40px;">
			<div class="top_logo_box" style="">LOGO</div>
			<span class="icon icon-align-justify nav_icon shrink"></span>
			<div style="float: left;margin-left: 20px">
				<li style="float: left;">
					<span class="icon icon-home nav_icon"></span>
				</li>
				<li style="float: left;">
					<span class="icon icon-asterisk nav_icon"></span>
				</li>
				<li style="float: left;">
					<span class="icon icon-envelope nav_icon"></span>
				</li>
			</div>
			<div style="float: right;margin-right: 20px;">
				<li style="float: right;">
					<span class="icon icon-off nav_icon"></span>
				</li>
				<li style="float: right;">
					<span class="icon icon-user nav_icon"></span>
					<span style="padding-left: 5px">admin</span>
				</li>
				<li style="float: right;">
					<span class="icon icon-cog nav_icon options"></span>
				</li>
			</div>
		</div>
		<div class="col-md-1 column left row">
			<!-- 自写nav -->
			<ul class="col-md-12 left_nav">
				<li>
					<a href="#" name="other/home.html" class="nav_boss nav_shrink_a nav_boss_select" >
	                	<span class="icon icon-home nav_boss_icon"></span>
	                    <span class="nav_boss_text">首页</span>
	                </a>
	                <ul class="nav_shrink">
	                </ul>
	            </li>
				<li>
	                <a href="#" class="nav_boss">
	                	<span class="icon icon-book nav_boss_icon"></span>
	                    <span class="nav_boss_text">基础<b class="caret"></b></span>
	                </a>
	                <ul class="nav_shrink">
	               		<a href="#" name="other/Control_icon.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-star"></span>图标</li></a>
		               	<a href="#" name="other/Control_buttons.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-bold"></span>按钮</li></a>
		               	<a href="#" name="other/Control_dialog_box.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-check-empty"></span>对话框</li></a>
		               	<a href="#" name="other/Control_float_news.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-comment-alt"></span>漂浮消息</li></a>
		               	<a href="#" name="other/Control_paging.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon text-icon">Go</span>分页器</li></a>
	               </ul>
				</li>
				<li>
	                <a href="#" class="nav_boss">
	                	<span class="icon icon-check-empty nav_boss_icon"></span>
	                    <span class="nav_boss_text">控件<b class="caret"></b></span>
	                </a>
	                <ul class="nav_shrink">
		               	<a href="#" name="other/Control_Datepicker.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-calendar"></span>日期选择</li></a>
		               	<a href="#" name="other/Control_sorting.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-sort"></span>拖拽排序</li></a>
	               </ul>
				</li>
				<li>
					<a href="#" class="nav_boss">
	                	<span class="icon icon-list-alt nav_boss_icon"></span>
	                    <span class="nav_boss_text">视图组件<b class="caret"></b></span>
	                </a>
	              	<ul class="nav_shrink">
		               	<a href="#" name="other/view_table.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-table"></span>数据表格</li></a>
		               	<a href="#" name="other/view_tab.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-credit"></span>标签页</li></a>
		               	<a href="#" name="other/View_tree_menu.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-th-list"></span>树形菜单</li></a>
		               	<a href="#" name="other/View_files_upload.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-cloud-upload"></span>文件上传</li></a>
		               	<a href="#" name="other/View_organization.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-sitemap"></span>组织结构</li></a>
	               </ul>
				</li>
				<li>
					<a href="#" class="nav_boss">
	                	<span class="icon icon-file nav_boss_icon"></span>
	                    <span class="nav_boss_text">引入插件<b class="caret"></b></span>
	                </a>
	              	<ul class="nav_shrink">
		               	<a href="#" name="other/echarts.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-line-chart"></span>可视化图表</li></a>
		               	<a href="#" name="other/GridManager.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-table"></span>GridManager</li></a>
	               </ul>
				</li>
			</ul>
		</div>
		<div class="col-md-11 column right row">
			<div class="black"></div>
			<div class="col-md-12 fill">
				<iframe class="iframe" src="other/home.html" frameborder="0" style="width: 100%;height: 100%"></iframe>
				<div class="options_box fill" style="none">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script src="Zui/js/jquery.min.js"></script>
<script src="Zui/js/zui.min.js"></script>
<script src="Zui/js/main.js"></script>
</html>

基本布局讲解:
引入文件:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!--响应式移动端-->
<link href="Zui/css/zui.min.css" rel="stylesheet"><!--Zui-->
<link rel="stylesheet" href="Zui/css/main.css"><!--引入样式-->
<link rel="stylesheet" href="Zui/css/main-color.css"><!--引入样式颜色包-->
<script src="Zui/js/jquery.min.js"></script><!--引入Jquery-->
<script src="Zui/js/zui.min.js"></script><!--引入Zui-->
<script src="Zui/js/main.js"></script><!--引入互动js-->
	

框架:
<div class="fill">
	<div class="row fill">
		<div class="col-md-12 column top row" style="height: 40px;">
			<!--顶部内容区域-->
			<div class="top_logo_box" style="">
				<!--logo区域-->

			</div>
			<span class="icon icon-align-justify nav_icon shrink"></span>

		</div>
		<div class="col-md-1 column left row">
			<!--左侧区域-->

		</div>
		<div class="col-md-11 column right row">
			<div class="black"></div>
			<div class="col-md-12 fill">
				<!--右侧区域-->

			</div>
		</div>
	</div>
</div>

左侧nav与右侧关联:(左侧a标签的name值对应右侧的文件路径)
<!--左侧nav-->
<ul class="col-md-12 left_nav">
	<li>
		<a href="#" name="other/home.html" class="nav_boss nav_shrink_a nav_boss_select" >
        	<span class="icon icon-home nav_boss_icon"></span>
            <span class="nav_boss_text">首页</span>
        </a>
        <ul class="nav_shrink">
        	
        </ul>
    </li>
	
	<li>
        <a href="#" class="nav_boss">
        	<span class="icon icon-book nav_boss_icon"></span>
            <span class="nav_boss_text">基础<b class="caret"></b></span>
        </a>
        <ul class="nav_shrink">
       		<a href="#" name="other/Control_icon.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-star"></span>图标</li></a>
           	<a href="#" name="other/Control_buttons.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-bold"></span>按钮</li></a>
           	<a href="#" name="other/Control_dialog_box.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-check-empty"></span>对话框</li></a>
           	<a href="#" name="other/Control_float_news.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-comment-alt"></span>漂浮消息</li></a>
           	<a href="#" name="other/Control_paging.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon text-icon">Go</span>分页器</li></a>
       </ul>
	</li>
	<li>
        <a href="#" class="nav_boss">
        	<span class="icon icon-check-empty nav_boss_icon"></span>
            <span class="nav_boss_text">控件<b class="caret"></b></span>
        </a>
        <ul class="nav_shrink">
           	<a href="#" name="other/Control_Datepicker.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-calendar"></span>日期选择</li></a>
           	<a href="#" name="other/Control_sorting.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-sort"></span>拖拽排序</li></a>
       </ul>
	</li>
	<li>
		<a href="#" class="nav_boss">
        	<span class="icon icon-list-alt nav_boss_icon"></span>
            <span class="nav_boss_text">视图组件<b class="caret"></b></span>
        </a>
      	<ul class="nav_shrink">
           	<a href="#" name="other/view_table.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-table"></span>数据表格</li></a>
           	<a href="#" name="other/view_tab.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-credit"></span>标签页</li></a>
           	<a href="#" name="other/View_tree_menu.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-th-list"></span>树形菜单</li></a>
           	<a href="#" name="other/View_files_upload.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-cloud-upload"></span>文件上传</li></a>
           	<a href="#" name="other/View_organization.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-sitemap"></span>组织结构</li></a>
       </ul>
	</li>
	<li>
		<a href="#" class="nav_boss">
        	<span class="icon icon-file nav_boss_icon"></span>
            <span class="nav_boss_text">引入插件<b class="caret"></b></span>
        </a>
      	<ul class="nav_shrink">
           	<a href="#" name="other/echarts.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-line-chart"></span>可视化图表</li></a>
           	<a href="#" name="other/GridManager.html" class="nav_shrink_a"><li class="nav_shrink_li"><span class="icon icon-table"></span>GridManager</li></a>
       </ul>
	</li>
</ul>
<!--右侧iframe-->
<iframe class="iframe" src="other/sy.html" frameborder="0" style="width: 100%;height: 100%"></iframe>

iframe引入内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小标题</title>
	<link rel="stylesheet" href="../Zui/css/zui.min.css">
	<!--IE8只能支持jQuery1.9-->
	<!--[if lte IE 8]>
	<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
	<![endif]-->
	<!--[if lt IE 9]>
		<script src="jquery-1.9.0.js">
	<![endif]-->
     <!--[if lt IE 9]>
	  <script src="dist/lib/ieonly/html5shiv.js"></script>
	<![endif]-->
	<!--[if lt IE 9]>
	  <script src="dist/lib/ieonly/respond.js"></script>
	<![endif]-->
	<!--[if lt IE 9]>
	  <script src="dist/lib/ieonly/excanvas.js"></script>
	<![endif]-->
</head>
<body style="width: 96%;margin:20px 2%;margin-bottom: 60px;background-color: #f5f5f5">
	<!--[if lt IE 8]>
		<div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
	<![endif]-->
</body>
<script src="../Zui/js/jquery.min.js"></script>
<script src="../Zui/js/zui.min.js"></script>
</html>
如若想修改主题颜色,可以参考设置页面中颜色 将
<link rel="stylesheet" href="zui/css/main-color.css">
替换成:
<link rel="stylesheet" href="Zui/css/theme/mashup_66c8d9.css">