码迷，mamicode.com
首页 > 其他好文 > 详细

自适应导航栏

时间：2019-12-16 09:24:33      阅读：107      评论：0      收藏：0      [点我收藏+]

标签：art   bootstra   站点   OLE   设备   前端   navbar   导航栏   标签   

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

默认的导航栏

1、向 <nav> 标签添加 class .navbar、.navbar-default。
2、向上面的元素添加 role="navigation"，有助于增加可访问性。
3、向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大
一号
4、为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

 

 

[html] view plaincopy
 
 
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset = "utf-8">  
  5.     <title>demo</title>  
  6.     <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">  
  7.     <script type="text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"></script>  
  8.     <script type="text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <nav class = "navbar navbar-default" role = "navigation">  
  12.         <div class="navbar-header">  
  13.             <a class="navbar-brand">hello</a>  
  14.         </div>  
  15.         <ul class="nav navbar-nav">  
  16.             <li class="active"><a href="#">网站首页</a></li>  
  17.             <li><a href="#">JS开发</a></li>  
  18.             <li><a href="#">html</a></li>  
  19.             <li><a href="#">jquery</a></li>  
  20.               
  21.             <li class="dropdown">  
  22.                 <a href="#" class="dropdown-toggle" data-toggle = "dropdown">前端学习 <span class="caret"></span></a>  
  23.   
  24.                 <ul class="dropdown-menu">  
  25.                     <li><a href="#">html+css学习</a></li>  
  26.                     <li><a href="#">javascript学习</a></li>  
  27.                     <li><a href="#">jquery学习</a></li>  
  28.                     <li class="divider"></li>  
  29.                     <li><a href="#">bootstrap学习</a></li>  
  30.                     <li><a href="#">less/sass学习</a></li>  
  31.                     <li><a href="#">angularJS学习</a></li>  
  32.                 </ul>  
  33.             </li>  
  34.         </ul>  
  35.     </nav>  
  36. </body>  
  37. </html>  

技术图片

 

 

响应式的导航栏

1、将要折叠的内容包含在带有class .collapse和.navbar-collspae的<div>中。
2、折叠起来的导航栏是带有class .navbar-toggle以及data-toggle和data-target两个属性的按钮，data-toggle用于告诉javascript
需要对按钮做什么，此处是折叠：collapse，data-target用于指示折叠哪个元素，此处是1中的导航菜单，data-target的属性值是要
指定的元素的id。
3、button中使用带有class .icon-bar的<span>创建所谓的汉堡按钮（就是按钮中多了几个横线）

 

 

[html] view plaincopy
 
 
 
  1. <body>  
  2.     <nav class = "navbar navbar-default" role = "navigation">  
  3.         <div class="navbar-header">  
  4.             <button type="button" class="navbar-toggle" data-toggle = "collapse"  data-target = "#target-menu">  
  5.                 <span class="sr-only">qieh</span>  
  6.                 <span class="icon-bar"></span>  
  7.                 <span class="icon-bar"></span>  
  8.                 <span class="icon-bar"></span>  
  9.             </button>  
  10.             <a class="navbar-brand">hello</a>  
  11.         </div>  
  12.         <div class="collapse navbar-collapse" id = "target-menu">  
  13.             <ul class="nav navbar-nav">  
  14.                 <li class="active"><a href="#">网站首页</a></li>  
  15.                 <li><a href="#">JS开发</a></li>  
  16.                 <li><a href="#">html</a></li>  
  17.                 <li><a href="#">jquery</a></li>  
  18.   
  19.                 <li class="dropdown">  
  20.                     <a href="#" class="dropdown-toggle" data-toggle = "dropdown">前端学习 <span class="caret"></span></a>  
  21.                     <ul class="dropdown-menu">  
  22.                         <li><a href="#">html+css学习</a></li>  
  23.                         <li><a href="#">javascript学习</a></li>  
  24.                         <li><a href="#">jquery学习</a></li>  
  25. <pre name="code" class="html">                        <li class="divider"></li>                          
<li><a href="#">bootstrap学习</a></li> <li><a href="#">less/sass学习</a></li> <li><a href="#">angularJS学习</a></li> </ul> </li> </ul> </div> </nav></body>

 





 


当屏幕的宽度大于等于768px时，显示与默认的导航栏相同，而屏幕宽度小于768px时，显示效果如下：
技术图片


注意:data-target的属性值其实是： #+id，如果只写成id，点击折叠按钮是没有任何反应的，另外，需要引入折叠插件，或者因为


bootstrap.min.js和jquery.js


 


导航栏中的表单


导航中的form表单，需要使用class navbar-form，这确保了表单垂直对齐和在较窄的视口中的折叠行为。使用对齐方式选型来决定

 


导航栏的内容放置在哪里，此处使用了navbar-right，居于右侧（如果使用navbar-left那么就会居于左侧，默认是左侧）。


 


 






[html] view plaincopy

 


 


 








    

  1. <body>  
    2. 

  2.     <nav class = "navbar navbar-default" role = "navigation">  
    3. 

  3.         <div class="navbar-header">             
    4. 

  4.             <a class="navbar-brand">hello</a>  
    5. 

  5.         </div>  
    6. 

  6.         <div>  
    7. 

  7.             <ul class="nav navbar-nav">  
    8. 

  8.                 <li class="active"><a href="#">网站首页</a></li>  
    9. 

  9.                 <li><a href="#">JS开发</a></li>  
    10. 

  10.                 <li><a href="#">html</a></li>  
    11. 

  11.                 <li><a href="#">jquery</a></li>  
    12. 

  12.             </ul>  
    13. 

  13.             <form class="navbar-form navbar-right" role="search">  
    14. 

  14.                 <div class="form-group">  
    15. 

  15.                     <input type="text" class="form-control" placeholder="Search">  
    16. 

  16.                 </div>  
    17. 

  17.                 <button type="submit" class="btn btn-default">提交</button>  
    18. 

  18.             </form>   
    19. 

  19.         </div>  
    20. 

  20.     </nav>  
    21. 

  21. </body>  
    22. 







 


技术图片


 


 


导航栏中的按钮


不在 <form> 中的 <button>或者a 元素。通过添加class .navbar-btn，使得按钮在导航栏上垂直居中


 


 


 






[html] view plaincopy

 


 


 








    

  1. <body>  
    2. 

  2.     <nav class = "navbar navbar-default" role = "navigation">  
    3. 

  3.         <div class="navbar-header">             
    4. 

  4.             <a class="navbar-brand">hello</a>  
    5. 

  5.         </div>  
    6. 

  6.         <div>  
    7. 

  7.             <ul class="nav navbar-nav">  
    8. 

  8.                 <li class="active"><a href="#">网站首页</a></li>  
    9. 

  9.                 <li><a href="#">JS开发</a></li>  
    10. 

  10.                 <li><a href="#">html</a></li>  
    11. 

  11.                 <li><a href="#">jquery</a></li>  
    12. 

  12.             </ul>  
    13. 

  13.             <form class="navbar-form navbar-right" role="search">  
    14. 

  14.                 <div class="form-group">  
    15. 

  15.                     <input type="text" class="form-control" placeholder="Search">  
    16. 

  16.                 </div>  
    17. 

  17.                 <button type="submit" class="btn btn-default">提交</button>  
    18. 

  18.             </form>   
    19. 

  19.             <button type="button" class="btn btn-primary navbar-btn">button按钮</button>  
    20. 

  20.             <a href = "#" class="btn btn-warning navbar-btn">链接按钮</a>  
    21. 

  21.         </div>  
    22. 

  22.     </nav>  
    23. 

  23. </body>  
    24. 







 


技术图片


 


导航栏中的文本


使用 class .navbar-text，确保适当的前导和颜色。





 


 






[html] view plaincopy

 


 


 








    

  1. <body>  
    2. 

  2.     <nav class = "navbar navbar-default" role = "navigation">  
    3. 

  3.         <div class="navbar-header">             
    4. 

  4.             <a class="navbar-brand">hello</a>  
    5. 

  5.         </div>  
    6. 

  6.         <div>  
    7. 

  7.             <ul class="nav navbar-nav">  
    8. 

  8.                 <li class="active"><a href="#">网站首页</a></li>  
    9. 

  9.                 <li><a href="#">JS开发</a></li>  
    10. 

  10.                 <li><a href="#">html</a></li>  
    11. 

  11.                 <li><a href="#">jquery</a></li>  
    12. 

  12.             </ul>  
    13. 

  13.             <p class="navbar-text">导航栏中文字  
    14. 

  14.                 <a href="#" class="navbar-link">链接</a>  
    15. 

  15.             </p>  
    16. 

  16.         </div>  
    17. 

  17.     </nav>  
    18. 

  18. </body>  
    19. 







 


技术图片


 


非导航链接


使用 class navbar-link 为默认的和倒转的导航栏选项添加适当的颜色，因为默认的a标签的样式可能与导航栏的样式不协调





 


 






[html] view plaincopy

 


 


 








    

  1. <body>  
    2. 

  2.     <nav class = "navbar navbar-default  navbar-inverse" role = "navigation">  
    3. 

  3.         <div class="navbar-header">             
    4. 

  4.             <a class="navbar-brand">hello</a>  
    5. 

  5.         </div>  
    6. 

  6.         <div>  
    7. 

  7.             <ul class="nav navbar-nav">  
    8. 

  8.                 <li class="active"><a href="#">网站首页</a></li>  
    9. 

  9.                 <li><a href="#">JS开发</a></li>  
    10. 

  10.                 <li><a href="#">html</a></li>  
    11. 

  11.                 <li><a href="#">jquery</a></li>  
    12. 

  12.             </ul>  
    13. 

  13.             <p class="navbar-text">导航栏中文字  
    14. 

  14.                 <a href="#" class="navbar-link">链接</a>  
    15. 

  15.             </p>  
    16. 

  16.         </div>  
    17. 

  17.     </nav>  
    18. 

  18.     <div style="background-color:#CCCCCC;height:1000px;">          
    19. 

  19.     </div>  
    20. 

  20.     <div style="background-color:#BFFF70;height:200px;">          
    21. 

  21.     </div>  
    22. 

  22. </body>  
    23. 







 


 


固定到顶部


如果想要让导航栏固定在页面的顶部，向 .navbar class 添加 class .navbar-fixed-top。为了防止导航栏与页面主体中的其他内容

 


的顶部相交错，需要向 <body> 标签添加内边距，内边距的值至少是导航栏的高度。


 






[html] view plaincopy

 


 


 








    

  1. <body>  
    2. 

  2.     <nav class = "navbar navbar-default navbar-static-top" role = "navigation">  
    3. 

  3.         <div class="navbar-header">             
    4. 

  4.             <a class="navbar-brand">hello</a>  
    5. 

  5.         </div>  
    6. 

  6.         <div>  
    7. 

  7.             <ul class="nav navbar-nav">  
    8. 

  8.                 <li class="active"><a href="#">网站首页</a></li>  
    9. 

  9.                 <li><a href="#">JS开发</a></li>  
    10. 

  10.                 <li><a href="#">html</a></li>  
    11. 

  11.                 <li><a href="#">jquery</a></li>  
    12. 

  12.             </ul>  
    13. 

  13.             <p class="navbar-text">导航栏中文字  
    14. 

  14.                 <a href="#" class="navbar-link">链接</a>  
    15. 

  15.             </p>  
    16. 

  16.         </div>  
    17. 

  17.     </nav>  
    18. 

  18.     <div style="background-color:#CCCCCC;height:1000px;">          
    19. 

  19.     </div>  
    20. 

  20.     <div style="background-color:#BFFF70;height:200px;">          
    21. 

  21.     </div>  
    22. 

  22. </body>  
    23. 





为了能够看出效果，此处添加了两个有背景色的div。


 


技术图片


 


 


固定到底部，只需要把class .navbar-fixed-top换成.navbar-fixed-bottom即可，不需要在body中添加内边距。




对于给nav添加 .navbar-static-top class，实在是没有看出有什么作用，开始以为是能够创建一个浮动的导航条的。





反色的导航栏


向 .navbar class 添加 .navbar-inverse class，创建一个带有黑色背景白色文本的导航栏

 


 






[html] view plaincopy

 


 


 








    

  1. <body>  
    2. 

  2.     <nav class = "navbar navbar-default  navbar-inverse" role = "navigation">  
    3. 

  3.         <div class="navbar-header">             
    4. 

  4.             <a class="navbar-brand">hello</a>  
    5. 

  5.         </div>  
    6. 

  6.         <div>  
    7. 

  7.             <ul class="nav navbar-nav">  
    8. 

  8.                 <li class="active"><a href="#">网站首页</a></li>  
    9. 

  9.                 <li><a href="#">JS开发</a></li>  
    10. 

  10.                 <li><a href="#">html</a></li>  
    11. 

  11.                 <li><a href="#">jquery</a></li>  
    12. 

  12.             </ul>  
    13. 

  13.             <p class="navbar-text">导航栏中文字  
    14. 

  14.                 <a href="#" class="navbar-link">链接</a>  
    15. 

  15.             </p>  
    16. 

  16.         </div>  
    17. 

  17.     </nav>  
    18. 

  18.     <div style="background-color:#CCCCCC;height:1000px;">          
    19. 

  19.     </div>  
    20. 

  20.     <div style="background-color:#BFFF70;height:200px;">          
    21. 

  21.     </div>  
    22. 

  22. </body>  
    23. 





技术图片


 
自适应导航栏
标签：art   bootstra   站点   OLE   设备   前端   navbar   导航栏   标签   
原文地址：https://www.cnblogs.com/EarlyBridVic/p/12047203.html

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！