胶囊标签页：
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类将显示标签页样式
3295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
