bootstrap制作导航栏

最新推荐文章于 2024-07-21 07:10:05 发布

.Passion

最新推荐文章于 2024-07-21 07:10:05 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/104100351

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.普通选项卡

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<style>
		div{border:1px #1B6D85 solid;}
	</style>

</head>
<body>
	<!--
		下拉菜单
	-->
	
	<div class="container">
		<h1>选项卡1</h1>
		<ul class="nav nav-tabs">
			<li class="active"><a href="">首页</a></li>
			<li><a href="">博客</a></li>
			<li><a href="">学院</a></li>
			<li><a href="">问答</a></li>
		</ul>
	</div>
	 
	 
	 
	
</body>
</html>

样式如下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<style>
		div{border:1px #1B6D85 solid;}
	</style>

</head>
<body>
	<!--
		下拉菜单(选项卡)
	-->
	
	<div class="container">
		<h1>选项卡1</h1>
		<ul class="nav nav-tabs">
			<li class="active"><a href="">首页</a></li>
			<li><a href="">博客</a></li>
			<li><a href="">学院</a></li>
			<li><a href="">问答</a></li>
		</ul>
	</div>
	 
	 
	 <div class="container">
	 	<h1>胶囊样式</h1>
	 	<ul class="nav nav-pills">
	 		<li class="active disabled"><a href="">首页</a></li>
	 		<li><a href="">博客</a></li>
	 		<li><a href="">学院</a></li>
	 		<li><a href="">问答</a></li>
	 	</ul>
	 </div>
	 
	 
	 <div class="container">
	 	<h1>自适应导航</h1>
	 	<ul class="nav nav-tabs nav-justified">
	 		<li class="active"><a href="">首页</a></li>
	 		<li><a href="">博客</a></li>
	 		<li><a href="">学院</a></li>
	 		<li><a href="">问答</a></li>
	 	</ul>
	 </div>
	 
	
</body>
</html>

在这里插入图片描述

制作二级导航

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<style>
		div{border:1px #1B6D85 solid;}
	</style>

</head>
<body>
	 
	 
	 <div class="container">
	 	<h1>二级导航</h1>
	 	<ul class="nav nav-tabs  ">
	 		<li class="active"><a href="">首页</a></li>
	 		<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">博客</a>
			
				<ul class="dropdown-menu">
					<li><a href="#">文章管理</a></li>
					<li><a href="#">博客管理</a></li>
					<li><a href="#">分类管理</a></li>
				</ul>
			
			</li>
	 		<li><a href="">学院</a></li>
	 		<li><a href="">问答</a></li>
	 	</ul>
	 </div>
	 
	 
	 
	 
	
</body>
</html>