bootstrap--标签页

1.首先需要引入bootstrap.min.css和bootstrap.min.js

2.在bootstrap3里边的col-md-*与span*是相同的，现在多用col-md-*

3.clearfix用于解决浮动引出来的其他问题

4.是利用a标签的锚链接对应下边 tab-pane 盒子的id名进行跳转的

 

<div class="container-fluid">
　　<div class="row-fluid">
　　　　<div class="portlet">
　　　　　　<div class="portlet-title"></div>　　

　　　　　　<div class="portlet-body">
　　　　　　　　<div class="row-fulid">
　　　　　　　　　　<div class="col-md-12">
　　　　　　　　　　　　　　<div class="tabbable"> <!-- 需要一个名为 "tabbable"的 CSS class，充当包装角色 -->
　　　　　　　　　　　　　　　　　　<ul class="nav nav-tabs">
　　　　　　　　　　　　　　　　　　　　<!-- 在它内部，添加 "nav" 和 "nav-tabs" class 到一个 "ul" 元素。在它内部，使用 'data-toggle="tab"'（应用到相关的锚元素，例如a标签）创建可点击区域。 -->
　　　　　　　　　　　　　　　　　　　　　　<li class="active">
　　　　　　　　　　　　　　　　　　　　　　　　<a data-toggle="tab" href="#tab_Factor">监测因素配置</a>
　　　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　　　　　<li class="">
　　　　　　　　　　　　　　　　　　　　　　　　<a data-toggle="tab" href="#tab_DTU">DTU配置</a>
　　　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　　　　　　　　　　　　<!-- 然后，通过 CSS class "tab-content" 创建一个 div，该 div 内有一些带有 CSS class "tab-pane" 的 div 用来保存实际内容。 -->
　　　　　　　　　　　　　　　　　　　　<div class="tab-content">
　　　　　　　　　　　　　　　　　　　　　　　<div class="tab-pane row-fluid active" id="tab_Factor">
　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="portlet-body">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="clearfix">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="row-fluid" >
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　预处理脚本
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　　　　</div>

　　　　　　　　　　　　　　　　　　　　　　　<div class="tab-pane row-fluid" id="tab_DTU">
　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="portlet-body">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="clearfix">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="row-fluid" >
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　预处理脚本预处理脚本
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　　　　</div>

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