选项卡
<div class="container">
<h1 class="page-header">选项卡</h1>
<ul class="nav nav-pills">
<li class="active"><a href="#">Java</a>
</li>
<li><a href="#">C++</a>
</li>
<li><a href="#">.Net</a>
</li>
</ul>
</div>
选项卡的内容
<div class="container">
<h1 class="page-header">选项卡内容</h1>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Java</a>
</li>
<li><a href="#tab2" data-toggle="tab">C++</a>
</li>
<li><a href="#tab3" data-toggle="tab">.Net</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Java</p>
</div>
<div class="tab-pane" id="tab2">
<p>C++</p>
</div>
<div class="tab-pane" id="tab3">
<p>.Net</p>
</div>
</div>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
data-toggle=”tab”;选项卡的点击按钮上,必须添加该标签
href=”#tab1”;对应选项卡的对应的内容,用id来匹配
转自http://blog.csdn.net/xdd_lmd/article/details/46582127