Bootstrap制作胶囊标签页1.2.页头使用ul标签在ul标签中能够添加.nav和.添加.nav和.3.4.5.<m

胶囊标签页：

1.使用一个完整的标签页可以分为页头选择卡和内容两部分
2.页头使用ul标签在ul标签中能够添加.nav和.nav-tabs类，将会应用Bootstrap标签页样式，
添加.nav和.nav-pills类会应用胶囊标签样式
3.需要几个标签项就添加几个li
4.在li标签中添加a标签，a标签的href的值直接跟标签页下面的内容div的id关联，十分重要
5.在a标签中添加data-toggle="tab"或data-toggle="pill"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶囊标签页</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body > 
  <ul class="nav nav-pills">
      <li class="active" role="presentation" ><a href="#home" role="tab" data-toggle="pill">Home</a></li>
      <li  role="presentation"><a href="#sport" role="tab" data-toggle="pill">sport</a></li>
      <li  role="presentation"><a href="#messages" role="tab" data-toggle="pill">Messages</a></li>
  </ul>
  <div class="tab-content">
      <div class="tab-pane active" id="home">主页</div>
      <div class="tab-pane" id="sport">运动</div>
      <div class="tab-pane" id="messages">信息</div>
  </div>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

在这里插入图片描述
将.nav和.nav-pills类换成.nav和.nav-tabs类将显示标签页样式