用 Bootstrap4 制作响应式网页二(导航菜单)

zhezhongyun 2025-04-26 22:39 49 浏览

上文已经介绍安装框架的过程，本文接下来制作一个导航菜单。

导航菜单设计左右结构，左边放logo,右边放菜单链接。

下面是 html部分的整体代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>用Bootstrap4制作电脑手机响应式网页</title>
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/css/style.css"><!-- 在昨天的基础上多添加一个样式文件 -->
	<script defer type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
	<script defer type="text/javascript" src="/js/bootstrap.min.js"></script>
</head>
<body>
	<header> <!-- header 作为导航菜单的容器 -->
		<div class="container"> <!-- container 限定我们的内容居中 -->
			<div class="navbar navbar-dark navbar-expand-lg"> <!-- 这部分导航左边logo区域 -->
				<a class="navbar-brand" href="#">
					<img src="/images/logo.png" /> Logo
				</a>
				<!-- button 按钮为隐藏，切换到手机端时显示到右边下拉按钮 3个div 形成3条横线 -->
			  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navmenu">
			  	<div class="mt-1"></div>
			  	<div class="mt-1"></div>
			  	<div class="mt-1"></div>
			  </button>
			  <!-- 导航菜单部分，pc上居右显示 ml-auto -->
			  <div id="navmenu" class="navbar-collapse collapse">
			    <ul class="navbar-nav ml-auto">
			      <li class="nav-item">
			        <a class="nav-link active" href="#">首页</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link " href="#">菜单一</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link " href="#">菜单二</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link " href="#">菜单三</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link " href="#">菜单四</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link " href="#">菜单五</a>
			      </li>
			    </ul>
			  </div>
			</div>
		</div>
	</header>
</body>
</html>

style.css部分：

header{background-color: #7952b3;}
header .navbar-brand img{height: 30px;border-radius: 50%;}
header .navbar-dark .navbar-toggler,header .navbar-dark .navbar-toggler:focus,header .navbar-dark .navbar-toggler:hover{border: none;padding: 0;outline: none;}
header .navbar-dark .navbar-toggler div{width:25px;height: 4px;background-color: #fff;}

给 header 添加一个背景色 #7952b3

以上是完整代码，初学者可复制代码尝试一下。

HTML script defer 属性

上一篇：Web性能的计算方式与优化方案(二)
下一篇：实战网页实现平滑滚动

用 Bootstrap4 制作响应式网页二(导航菜单)

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

旧手机新玩法，MacroDeck进阶指南

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库