首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

bootstrapv3响应式导航栏目设计

作者：A198806192616 | 来源：互联网 | 2023-09-23 17:29

使用 Twitter Bootstrap 3 创建响应式导航栏 
- 

这里的“响应式”是指导航栏的宽度及菜单样式会根据设备的宽度自动调节。 
即： 
    在宽屏状态下导航栏会扩展到最大宽度。 
    而在窄屏的时候，导航栏会将导航条目收纳到一个菜单按钮中。 
    
先看一下最终效果： 

bootstrap v3 响应式导航栏目设计 


一：设置页面为“响应式” 

在 html 的 head 标签中加入以下代码: 

Html代码 

 bootstrap v3 响应式导航栏目设计

  1.   




二：创建导航栏的 html 标签 

注：html5可以使用 nav 标签 

 

Html代码 

 bootstrap v3 响应式导航栏目设计

  1.   
  2.       
  3.           
  4.           
  5.             
  6.                     data-toggle="collapse"   
  7.                     data-target=".navbar-ex1-collapse">  
  8.                 Toggle navigation  
  9.                   
  10.                   
  11.                   
  12.               
  13.             Brand Name  
  14.         
  
  •           
  •           
  •               
  •                 
  • Home
    •   
  •                 
  • About
    •   
  •                 
  • Products
    •   
  •                 
  • Blog
    •   
  •                 
  • Support
    •   
  •               
  •         
    •   
  •     
    •   
  •   




    • 效果预览： 
    bootstrap v3 响应式导航栏目设计


    我们对 nav 标签使用了 navbar-default 样式。 
    导航栏由二部分组成： 
    1. 导航头：包括企业的标志、名称 
    2. 导航菜单：包括一个个的导航链接 

    在导航菜单中， 
    用 navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中。 
    用 navbar-right 样式使这些条目居右显示。 

    注意： 
    需要包含 role="navigation" 使导航栏可用。 



    三：修改样式 

    默认的样式虽然可以用。但是，我们也可以修改它。 

    custom.css 
     

    Css代码 

     bootstrap v3 响应式导航栏目设计

    1. .navbar {  
    2.  background-image: linear-gradient(#54B4EB, #2FA4E7 60%, #1D9CE5);  
    3.  background-repeat: no-repeat;  
    4.  border-bottom: 1px solid #178ACC;  
    5.  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);  
    6.  border-radius: 0px;  
    7. }  
    8.   
    9. .navbar-default {  
    10.      background-color: #2FA4E7;  
    11.      border-color: #1995DC;  
    12. }  
    13.   
    14. .navbar-default .navbar-brand,  
    15. .navbar-default .navbar-brand:hover,  
    16. .navbar-default .navbar-brand:focus ,  
    17. .navbar-default .navbar-nav > li > a {  
    18.      color: #FFF;  
    19. }  
    20.   
    21. .navbar-default .navbar-nav > li > a:hover,  
    22. .navbar-default .navbar-nav > li > a:focus {  
    23.      color: #FFF;  
    24.      background-color: #178ACC;  
    25. }  
    26.   
    27. .navbar-default .navbar-toggle:hover,  
    28. .navbar-default .navbar-toggle:focus {  
    29.     background-color: #178ACC;  
    30. }  
    31.   
    32. .navbar-default .navbar-toggle {  
    33.     border-color: #178ACC;  
    34. }  
    35.   
    36. .navbar-default .navbar-toggle .icon-bar {  
    37.     background-color: #FFF;  
    38. }  


        
        

    效果预览： 
    bootstrap v3 响应式导航栏目设计




    四：固定导航栏 

    1. 使导航栏固定在顶部 

    对 nav 标签使用 navbar-fixed-top 样式，使导航栏固定在顶部。 
     

    Html代码 

     bootstrap v3 响应式导航栏目设计

    1.   
    2.      
    3.   




    2. 使导航栏固定在底部 

    对 nav 标签使用 navbar-fixed-bottom 样式，使导航栏固定在顶部。 
     

    Html代码 

     bootstrap v3 响应式导航栏目设计

    1.   
    2.      
    3.   




    五：完整代码 

    Html代码 

     bootstrap v3 响应式导航栏目设计

    1.   
    2.   
    3.       
    4.           
    5.           
    6.           
    7.   
    8.           
    9.         
    10.         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
    11.   
    12.           
    13.         
    14.         integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
    15.   
    16.   
    17.            
    18.   
    19.           
    20.           
    21.   
    22.           
    23.       
    24.       
    25.   
    26.       
    27.           
    28.               
    29.               
    30.                   
    31.                 Toggle navigation  
    32.                   
    33.                   
    34.                   
    35.                   
    36.                 Brand Name  
    37.               
    38.               
    39.               
    40.                   
    41.                     
    42. Home
      43.   
    43.                     
    44. About
      45.   
    45.                     
    46. Products
      47.   
    47.                     
    48. Blog
      49.   
    49.                     
    50. Support
      51.   
    51.                   
    52.               
    53.           
    54.       
    55.       
    56.       
    57.   



    转载自： http://lixh1986.iteye.com/blog/2321482 


     


    推荐阅读
    author-avatar
    A198806192616
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有