1. 标签页
- 添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式， 添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
- 添加 data-toggle=“tab” 或 data-toggle=“pill” 到锚文本链接中
1.1nav-tabs
<ul class="nav nav-tabs"> <!-- 添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中 --> <li><a href="#a1" data-toggle="tab">a1</a></li> <li><a href="#a2" data-toggle="tab">a2</a></li> <li><a href="#a3" data-toggle="tab">a3</a></li> </ul> <div class="tab-content"> <!-- .active激活第一个内容，若不写起始状态都是隐藏 --> <!-- 请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容 --> <!-- in active二者缺一初始值都不显示 --> <div id="a1" class="tab-pane fade in active">第一</div> <div id="a2" class="tab-pane fade">第二</div> <div id="a3" class="tab-pane fade">第三</div> </div>
效果：
1.2nav-pills
<ul class="nav nav-pills"> <li><a href="#a1" data-toggle="pill">a1</a></li> <li><a href="#a2" data-toggle="pill">a2</a></li> <li><a href="#a3" data-toggle="pill">a3</a></li> </ul> <div class="tab-content"> <div id="a1" class="tab-pane fade in active">第一</div> <div id="a2" class="tab-pane fade">第二</div> <div id="a3" class="tab-pane fade">第三</div> </div>
效果：
2.滚动监听
data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:300px;overflow:auto; position: relative;"
