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

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

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

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

	
	
	
	
	
	<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>


	
 
		
 
			
 
				
					 Logo
				
				
			  
			  	

			  	

			  	

			  
			  
			  

			    

			      

			        首页
			      
			      

			        菜单一
			      
			      

			        菜单二
			      
			      

			        菜单三
			      
			      

			        菜单四
			      
			      

			        菜单五
			      
			    
			  
			
		
	

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

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