Boostrap制作胶囊标签页
1.把标签页分为页头选项卡和内容两部分。
2.页头使用ul标签，在ul中添加.nav和.nav-pills类，添加的.nav和.nav-pills类会应用胶囊标签样式，需要几个标签页就添加几个li标签。
3.在li标签中添加a标签，a标签中的href的值直接与标签页下面的内容div标签的id值关联。
4.在a标签中添加data-toggle=“pill”。
页头代码如下
<ul class="nav nva-pills">
<li><a href="#id" data-toggle="pill">one</a></li>
</ul>
5.内容部分最外层使用div标签并添加.tab-content类，然后添加每个标签页对应的div标签，这些标签里面添加.tab-pane类和对应的id值，示例代码如下：
<div class="tab-content">
<div class="tab-pane active" id="one">...</div>
<div class="tab-pane" id="two">...</div>
<div class="tab-pane" id="three">...</div>
</div>
整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatiblel" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>胶囊标签页</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css">
</head>
<body>
<ul class="nav nav-pills">
<li class="active"><a href="#one" data-toggle="pill">1</a></li>
<li><a href="#two" data-toggle="pill">2</a></li>
<li><a href="#three" data-toggle="pill">3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">第一个页面</div>
<div class="tab-pane" id="two">第二个页面</div>
<div class="tab-pane" id="three">第三个页面</div>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
效果图如下：
点击不同的按钮可以跳转到相应的标签页，读者可以自己操作，把每个标签页设计的更高级。