bootstarp组件实现导航栏

最新推荐文章于 2024-05-14 09:55:02 发布

夏木炎

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量1.2k

点赞数

分类专栏： Bootstrap之旅文章标签： bootstarp

本文链接：https://blog.csdn.net/xm393392625/article/details/79078576

版权

Bootstrap之旅专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 当宽度太小时，三层汉堡收起导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			<!--default默认主题 暗色调inverse-->
			<nav class="navbar navbar-inverse">
				<div class="navbar-header">
					<a href="#" class="navbar-brand"><strong>zhq</strong>.com</a>
					<button class="navbar-toggle" data-toggle="collapse" data-target="#nav1">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div id="nav1" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<!--active加深-->
						<li class="active"><a href="#">首页</a></li>
						<li><a href="#">相册</a></li>
						<li><a href="#">说说</a></li>
						<li><a href="#">个人中心</a></li>
					</ul>
				
					<!--搜索框-->
					<form action="" class="navbar-form navbar-right">
						<input type="text" placeholder="搜索" class="form-control"/>
					</form>
					<a class="navbar-btn btn btn-sm btn-primary">登入</a>
					<a class="navbar-btn btn btn-sm btn-primary">注册</a>
				</div>
			</nav>
		</div>
		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>

2. 效果图

正常屏幕宽度时：