tab切换即标签页也是我们在网页中经常见的一种结构，可以将多个板块的内容放入一个容器中，在需要的显示显示，能有效的利用网页的空间，以小占面放多内容，以下是用bootstrap搭建tab切换结构的基本代码：

<!--tab切换-->
<!--第一步：声明tab的导航条-->
<ul class="nav nav-tabs">
  <li class="active">
  <!--第二步：声明行为是tab切换-->
  <!--第五步：连接tab导航切换tab内容-->
  <!--第六步：看CSS样式-->
    <a href="#content1" data-toggle="tab">标签1</a>
  </li>
  <li>
    <a href="#content2" data-toggle="tab">标签2</a>
  </li>
  <li>
    <a href="#content3" data-toggle="tab">标签3</a>
  </li>
</ul>		
<!--第三步：编写tab的内容-->
<div class="tab-content">
  <!--第四步：声明tab面板tab-pane 切换效果 fade 默认显示in 选中active-->
  <div class="tab-pane fade in active" id="content1">
    标签1的内容
  </div>
  <div class="tab-pane fade" id="content2">
    标签2的内容
  </div>
  <div class="tab-pane fade" id="content3">
    标签3的内容
  </div>
</div>