示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="bootstrap.css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	
</head>
<body>
	<!-- 普通导航  -->
	<ul class="nav nav-tabs">
		<li class="active"><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
	</ul>

	<!-- 胶囊式导航 -->
	<ul class="nav nav-pills">
		<li class="active"><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
	</ul>
	<!-- 水平均分导航 -->
	<ul class="nav nav-justified">
		<li class="active"><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
	</ul>
	<!-- 垂直导航 -->
	<ul class="nav nav-stacked">
		<li class="active"><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
		<li><a href="http://www.baidu.com">百度一下</a></li>
	</ul>
</body>
</html>

效果如下：
bootstrap中的导航_bootstrap
语法比较简单，只需一个带nav类样式修饰的ul标签即可。