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

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

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

导航菜单设计左右结构，左边放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 制作响应式网页二(导航菜单)

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?