您的位置：首页 > Web前端 > BootStrap

使用bootstrap标签页

2016-05-16 14:32 561 查看
关键字：使用标签页，静态调用html页面（使用iframe内联框架）

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>基本资料管理-部门管理</title>
</head>
<body>
<!------------ 标签标题-------------------->

<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#depart" data-toggle="tab">部门管理</a></li>
<li><a href="#goodssorts" data-toggle="tab">物品分类管理</a></li>
<li><a href="#measurement" data-toggle="tab">计量单位管理</a></li>
<li><a href="#input" data-toggle="tab">入库类型管理</a></li>
<li><a href="#outtype" data-toggle="tab">出库类型管理</a></li>
<li><a href="#suppliertype" data-toggle="tab">供应商类型管理</a></li>
</ul>

<!------------ 标签内容-------------------->

<div id="myTabContent" class="tab-content">
<!-- 部门-->
<div class="tab-pane fade in active" id="depart">
<IFRAME SRC="comAdmin_basic_depart.html" frameborder="0"  width="800px" height="800px"></IFRAME>
</div>
<!-- 物品分类-->
<div class="tab-pane fade" id="goodssorts" >
<IFRAME SRC="comAdmin_basic_goodssorts.html" frameborder="0"  width="800px" height="800px"></IFRAME>
</div>
<!-- 计量单位-->
<div class="tab-pane fade" id="measurement" >
<IFRAME SRC="comAdmin_basic_measurement.html" frameborder="0"  width="800px" height="800px"></IFRAME>
</div>
<!-- 入库类型-->
<div class="tab-pane fade" id="intype">
<IFRAME SRC="comAdmin_basic_intype.html" frameborder="0"  width="800px" height="800px"></IFRAME>
</div>
<!-- 出库类型-->
<div class="tab-pane fade" id="outtype">
<IFRAME SRC="comAdmin_basic_outtype.html" frameborder="0"  width="800px" height="800px"></IFRAME>
</div>
<!-- 供应商类型-->
<div class="tab-pane fade" id="suppliertype">
<IFRAME SRC="comAdmin_basic_suppliertype.html" frameborder="0"  width="800px" height="800px"></IFRAME>
</div>

</div>

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


效果图如下所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航