Bootstrap 标签页

标签页可以在一个页面中切换显示的内容。要构成标签页需要两个元素。第一个是一个列表

<ul class="nav nav-tabs">  nav-tabs 可换成nav-pills 由标签切换成胶囊式样式。
   <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
  <li><a href="#" data-toggle="tab">some link text</a>
...
</ul>
的列表。
第二个元素是内容，是一个tab-content的块，里面每个元素需要指定id.

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="svn">...</div>
  <div class="tab-pane fade" id="ios">...</div>
  <div class="tab-pane fade" id="java">...</div>
</div>

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：