Bootstrap的标签页导航

最新推荐文章于 2024-10-11 09:00:00 发布

djskl

最新推荐文章于 2024-10-11 09:00:00 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/djskl/article/details/28015345

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

背景

当初为了实现一个标签式导航，自己傻不拉几的写了好几天，结果还写的跟屎一样，最后才发现bootstrap有现成的..................哎，还是战术上的勤奋掩盖了战略上的懒惰！有时候选择比努力更重要。

结构

导航标签：

<ul class='nav+修饰类'>
       <li><a href="#tab-pane-id" data-toggle='tab/pill'>导航</a></li>
       <li>....</li>
</ul>

Bootstrap中可用的导航有相似的标记，用 基类.nav开头，这是相似的部分。改变 修饰类可以改变样式：

nav + nav-tabs：标签页导航

nav + nav-pills：胶囊式标签页导航(水平排列)

nav + nav-pills + nav-stacked：胶囊式标签页导航(垂直排列)

nav + nav-tabs/nav-pills + .nav-justified：导航标签等宽

默认的选中状态：.active

data-toggle属性一般放在超链接<a></a>内，用于响应鼠标点击事件，具体action由属性值决定

例子(胶囊式标签导航)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<link href="bootstrap/dist/css/bootstrap.css"  rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<ul class="nav nav-pills nav-stacked">
					<li class="active"><a href="#tab_1" data-toggle="pill">TAB_ONE</a></li>
					<li><a href="#tab_2" data-toggle="pill">TAB_TWO</a></li>
				</ul>
			</div>
			<div class="col-md-9">
				<div class="tab-content">
				  <div class="tab-pane active" id="tab_1">我是TAB_ONE</div>
				  <div class="tab-pane" id="tab_2">我是TAB_TWO</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>