利用Bootstrap 响应式导航栏

导航栏是网页功能，在 Bootstrap 中。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
先上两张图看看PC

移动端

创建响应式导航栏

向 < nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=“navigation”，有助于增加可访问性。
向 < div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 < a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 < div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 < span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse < div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

	    

		    

		        
		            切换导航
		            
		            
		            
		        
		        Brand
		    
		    

		        

		            
Linnk
		            
Linnk
		            

		                
		                    Dropdown 
		                
		                

		                    
Action
		                    
Another action
		                    
Something else here
		                    

		                    
Separated link
		                    

		                    
One more separated link
		                
		            
		        
		      
		    
	    
	

导航栏中的表单以及按钮

表单

导航栏中的表单不是使用 Bootstrap 表单 中所讲到的默认的 class，它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。

按钮

您可以使用 class .navbar-btn 向不在 < form> 中的 < button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 < a> 和 < input> 元素上。
不要在 .navbar-nav 内的 < a> 元素上使用 .navbar-btn，因为它不是标准的 button class。

  

	      

	                
	      
	     Submit
 

导航栏固定

Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。

固定到定部

如果您想要让导航栏固定在页面的顶部，只需要 在.navbar class中 添加. navbar-fixed-top。

固定到底部

如果您想要让导航栏固定在页面的底部，只需要在.navbar class中 添加 .navbar-fixed-bottom。

整体代码:

	    

		    

		        
		            切换导航
		            
		            
		            
		        
		        Brand
		    
		    

		        

		            
Linnk
		            
Linnk
		            

		                
		                    Dropdown 
		                
		                

		                    
Action
		                    
Another action
		                    
Something else here
		                    

		                    
Separated link
		                    

		                    
One more separated link
		                
		            
		        
		         

		            

		                
		            
		            Submit
		        
		        

		            
Linnk
		            

		                
		                    Dropdown 
		                
		                

		                    
Action
		                    
Another action
		                    
Something else here
		                    

		                    
Separated link
		                    

		                    
One more separated link