bootstrap的选项卡和选项卡的内容

选项卡

    <div class="container">
<h1 class="page-header">选项卡</h1>
<!--nav-pills，nav-tabs，nav-stacked :改变选项卡的样式-->
<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>
<!--tabs-left:选项卡在左边显示 -->
<div class="tabbable">
<!--nav-pills，nav-tabs，nav-stacked :改变选项卡的样式-->
<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>

data-toggle=”tab”；选项卡的点击按钮上，必须添加该标签
href=”#tab1”；对应选项卡的对应的内容，用id来匹配