胶囊式标签页

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>

效果图如下:
胶囊式标签页_第1张图片
点击不同的按钮可以跳转到相应的标签页,读者可以自己操作,把每个标签页设计的更高级。

你可能感兴趣的:(标签页,胶囊标签页,nav-pills的作用,Boostrap制作标签页,tab-content)