使用Boostrap制作导航栏和汉堡按钮

最新推荐文章于 2024-06-03 16:12:08 发布

weixin_45684562

最新推荐文章于 2024-06-03 16:12:08 发布

阅读量3.2k

点赞数 7

文章标签：响应式导航栏汉堡按钮 boostrap的运用折叠按钮响应式菜单栏

本文链接：https://blog.csdn.net/weixin_45684562/article/details/102132700

版权

导航栏制作

使用Boostrap制作基础导航栏主要分为以下步骤：
1.事先引入jquery.js、boostrap.min.js和boostrap.min.css文件。
2.添加一个<div>标签或者一个容器<nav>,使用.navbar类和.navbar-default类，并添加role=“navigation”（增加可访问性）。
3.在上面的标签或容器内再添加一个div标签，使用.navbar-header类，内部包含带有.navbar-brand类的<a>标签，可用来定义品牌Logo，当然也可以写文字的。
4.也是在第二步的容器或者标签内添加带有.nav类、.navbar-nav类的无序列表即可。
虽然步骤看起来比较繁琐，但看代码理解一下就会啦：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<title>汉堡菜单</title>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div class="navbar navbar-default" role="navigation">
		<div class="navbar-header">  
       		 <a href="#" class="navbar-brand">网页首页</a>
       	</div>
		<ul class="navbar-nav nav">
			<li class="active"><a href="#">名师指教</a></li>
			<li><a href="#">教程报名</a></li>
			<li><a href="#">联系我们</a></li>
			<li><a href="#">精彩回顾</a></li>
		</ul>
	</div>
	<script src="lib/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

效果图如下：
在这里插入图片描述
当页面缩小的一定程度时，导航栏会竖直排布，是不是很智能呢，这就是我们的响应式啦。

汉堡按钮制作

当我们用手机浏览网页时，有时候会看到一个汉堡模样的按钮，当按一下时，隐藏的菜单会出现，再按时又会隐藏，这就是传说中的菜单折叠和隐藏效果。
在这里插入图片描述
实现菜单折叠效果如下步骤：
1.把小屏幕显示时需要折叠的内容包裹在一个div标签内，并且为这个div标签使用
.collapse和.navbar-collapse两个类，最后为这个标签添加一个id。
2.当小屏幕时，要显示的汉堡按钮的固定写法如下：

	<button class="navbar-toggle" type="button" data-toggle="collapse" >
				<span class="sr-only">汉堡按钮</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
	</button>

完整代码如下：

<body>
	<div class="navbar navbar-default" role="navigation">
		<div class="navbar-header">  
			<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#kaiguan">
				<span class="sr-only">汉堡按钮</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
       		 <a href="#" class="navbar-brand">网页首页</a>
       	</div>
       	<div class="navbar-collapse collapse" id="kaiguan">
			<ul class="navbar-nav nav">
				<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>
	<script src="lib/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>

button标签的data-target="#id"中的id对应的是要折叠部门的div标签内的id。建议读者多实践，并特意去掉某个类名，然后对比效果，观察这个类在代码中的作用，这样印象才更深刻。

weixin_45684562

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
使用Boostrap制作导航栏和汉堡按钮

导航栏制作使用Boostrap制作基础导航栏主要分为以下步骤：1.事先引入jquery.js、boostrap.min.js和boostrap.min.css文件。2.添加一个<div>标签或者一个容器<nav>,使用.navbar类和.navbar-default类，并添加role=“navigation”（增加可访问性）。3.在上面的标签或容器内再添加一个div...
复制链接

扫一扫