除了制作选项卡和下拉菜单，bootstrap还能编写出美观的网站导航栏

一、仿知乎导航栏

 　
     
    
          
      
               
             
       
        
               
              
       
      
       
       
                
        
                            
                   
                 
        
      
       
      
       
        
        
首页
        
        
话题
        
        
发现
      
       
      
       
        
        
注册知乎
        
        
登录
      
       
      
       提问    
      
  
     
 

body{margin-top: 50px;}

.myBtnStyle .dropdown-menu span{

margin:5px;

}

.myBtnStyle .dropdown-menu {

animation: 0.5s linear fadeIn;

}

@keyframes fadeIn {

0%{opacity:0;transform: translateY(-20);}

100%{opacity: 1;transform: translateY(0);}

}

tab-content {

border:1px solid #999; border-top: none;border-radius: 0 0 5px 5px;

}

.container {

width: 960px

}

.navbar-default{

background: linear-gradient(to bottom,#086ed5, #055db5) !important;

}

.navbar-header{

margin-top: -3px;

}

.navbar-nav a {

color:snow !important;

}

</style>

 

 

样式如图所示

 二、响应式导航

　　方便移动端，在窗口缩小的时候，可以将导航栏中的内容隐藏，点击导航栏中按钮后展开

   
     
    
      
      
       
        
                            //窗口缩小后显示的按钮也放在navbar-header中，和logo元素 navbar-brand 类同级；          　　　　//用三个icon-bar做出的按钮，三道杠，每个span各代表一条杠                
        logo      
       
      
       
                      //将需要隐藏的内容放入collapse，设置一个id，和上面的data-target关联        
        
          
         
第一个
          
         
第二个
          
         
            第三个             
          
 
           
child1
 
           
child2
 
          
          
        
        
      
       
    
      
 
     

如图：

 

 

 

三、滚动监听导航

 　　对于比较长的网页，可以做出导航栏内元素和网页内容位置相对应的效果

    //用data-spy="scroll" 来设置滚动监听， data-offset是用来调整元素对应的相应位置，对该数值尝试做出调整就可以体会到其作用  
     
    
      
      
       
        
        logo      
       
      
       
                     //此处复制了上面部分的代码，collapse这里可以忽略  - -！        
        
          
         
first
                       //href 和 需要对应的位置的元素id 要对应          
         
second
          
         
third
        
        
      
       
    
      
  
     
  
     
      aaaa
     
  
     
      bbbb
     
  
     
      cccc