bootstrap中的导航

最新推荐文章于 2024-05-12 09:51:40 发布

黄宝康

最新推荐文章于 2024-05-12 09:51:40 发布

阅读量309

点赞数

分类专栏： bootstrap 文章标签： bootstrap导航

本文链接：https://blog.csdn.net/huangbaokang/article/details/105723472

版权

bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

示例代码

<!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>