领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

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

nixiaole 2025-07-03 18:40:12 知识剖析 1 ℃

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

导航菜单设计左右结构，左边放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

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

Tags：

猜你喜欢

最近发表
标签列表