bootstrap v3 响应式导航栏目设计

最新推荐文章于 2022-04-18 14:56:14 发布
最新推荐文章于 2022-04-18 14:56:14 发布
阅读量798 收藏 1
点赞数
分类专栏： html5 bootstrap 文章标签： html5

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

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

 


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

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

Html代码 

 收藏代码

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  




二：创建导航栏的 html 标签 

注：html5可以使用 nav 标签 

 

Html代码 

 收藏代码

  1. <nav class="navbar navbar-default" role="navigation">  
  2.     <div class="container-fluid">  
  3.         <!--header section -->  
  4.         <div class="navbar-header">  
  5.             <button type="button" class="navbar-toggle"   
  6.                     data-toggle="collapse"   
  7.                     data-target=".navbar-ex1-collapse">  
  8.                 <span class="sr-only">Toggle navigation</span>  
  9.                 <span class="icon-bar"></span>  
  10.                 <span class="icon-bar"></span>  
  11.                 <span class="icon-bar"></span>  
  12.             </button>  
  13.             <a class="navbar-brand" href="#">Brand Name</a>  
  14.         </div>  
  15.         <!-- menu section -->  
  16.         <div class="collapse navbar-collapse navbar-ex1-collapse">  
  17.             <ul class="nav navbar-nav navbar-right">  
  18.                 <li><a href="# ">Home</a></li>  
  19.                 <li><a href="# ">About</a></li>  
  20.                 <li><a href="#">Products</a></li>  
  21.                 <li><a href="#">Blog</a></li>  
  22.                 <li><a href="#">Support</a></li>  
  23.             </ul>  
  24.         </div>  
  25.     </div>  
  26. </nav>  




效果预览： 



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

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

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



三：修改样式 

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

custom.css 
 

Css代码 

 收藏代码

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


    
    

效果预览： 





四：固定导航栏 

1. 使导航栏固定在顶部 

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

Html代码 

 收藏代码

  1. <nav class="navbar navbar-default navbar-fixed-top" role="navigation">  
  2.      
  3. </nav>  




2. 使导航栏固定在底部 

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

Html代码 

 收藏代码

  1. <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">  
  2.      
  3. </nav>  




五：完整代码 

Html代码 

 收藏代码

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.         <title></title>  
  7.   
  8.         <!-- Latest compiled and minified CSS -->  
  9.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  
  10.         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
  11.   
  12.         <!-- Optional theme -->  
  13.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"  
  14.         integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
  15.   
  16.   
  17.          <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  
  18.   
  19.         <!-- Latest compiled and minified JavaScript -->  
  20.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  
  21.         integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
  22.   
  23.         <style media="screen">  
  24.             .navbar {  
  25.              background-image: linear-gradient(#54B4EB, #2FA4E7 60%, #1D9CE5);  
  26.              background-repeat: no-repeat;  
  27.              border-bottom: 1px solid #178ACC;  
  28.              box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);  
  29.              border-radius: 0px;  
  30.             }  
  31.   
  32.             .navbar-default {  
  33.              background-color: #2FA4E7;  
  34.              border-color: #1995DC;  
  35.             }  
  36.   
  37.             .navbar-default .navbar-brand,  
  38.             .navbar-default .navbar-brand:hover,  
  39.             .navbar-default .navbar-brand:focus ,  
  40.             .navbar-default .navbar-nav > li > a {  
  41.              color: #FFF;  
  42.             }  
  43.   
  44.             .navbar-default .navbar-nav > li > a:hover,  
  45.             .navbar-default .navbar-nav > li > a:focus {  
  46.              color: #FFF;  
  47.              background-color: #178ACC;  
  48.             }  
  49.   
  50.             .navbar-default .navbar-toggle:hover,  
  51.             .navbar-default .navbar-toggle:focus {  
  52.             background-color: #178ACC;  
  53.             }  
  54.   
  55.             .navbar-default .navbar-toggle {  
  56.             border-color: #178ACC;  
  57.             }  
  58.   
  59.             .navbar-default .navbar-toggle .icon-bar {  
  60.             background-color: #FFF;  
  61.             }  
  62.         </style>  
  63.     </head>  
  64.     <body>  
  65.   
  66.     <nav class="navbar navbar-default" role="navigation">  
  67.         <div class="container-fluid">  
  68.             <!--header section -->  
  69.             <div class="navbar-header">  
  70.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
  71.                 <span class="sr-only">Toggle navigation</span>  
  72.                 <span class="icon-bar"></span>  
  73.                 <span class="icon-bar"></span>  
  74.                 <span class="icon-bar"></span>  
  75.                 </button>  
  76.                 <a class="navbar-brand" href="#">Brand Name</a>  
  77.             </div>  
  78.             <!-- menu section -->  
  79.             <div class="collapse navbar-collapse navbar-ex1-collapse">  
  80.                 <ul class="nav navbar-nav navbar-right">  
  81.                     <li><a href="# ">Home</a></li>  
  82.                     <li><a href="# ">About</a></li>  
  83.                     <li><a href="#">Products</a></li>  
  84.                     <li><a href="#">Blog</a></li>  
  85.                     <li><a href="#">Support</a></li>  
  86.                 </ul>  
  87.             </div>  
  88.         </div>  
  89.     </nav>  
  90.       
  91.     </body>  
  92. </html>  



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


 

update_upgrade
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap实现响应式导航栏效果
qq_27905183的博客
04-30 3493
效果图 实现代码<html> <head> <title>响应式导航栏</title> <meta http-equiv="content-Type" content="text/html;charset=utf-8" /> <!--Bootstrap CSS--> <link rel="stylesheet" href="b
如何让bootstrap的响应式导航条在左边弹出
weixin_44547510的博客
04-19 1862
bootstrap3的响应式导航条实现了在不同尺寸的设备上的缩放，如何创建一个响应式导航条呢？ 创建响应式导航条：根据bootstrap中文网的实例代码进行创建，bootstrap中文网有导航条实例，响应式导航条主要依据navbar-toggle，话不多说，代码如下： <div> <button type="button" class="navbar-toggle...
Bootstrap_响应式导航栏，汉堡按钮，遮盖
Martin 的博客
04-28 6115
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap 实例 - 基本的表格&lt;/title&gt; &lt;link rel="stylesheet" href="http://cdn.static.
响应式导航栏
m0_57774967的博客
04-18 2585
全部代码： 分部说明： 在body标签里，给个div标签，div标签里给个类名为“container”（响应式需要一个父级容器作为布局） 2.在类名为“container”里，给个无序列表ul标签，ul标签里有8个li标签，每个li标签里都打上导航栏文字 3.在head标签里，给个style标签，写样式 4.在style标签里，给个通配符*，外边距margin为0，内边距padding为0，列表属性list-style为none ...
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
weixin_34167043的博客
01-11 4734
有人说前端发展太快,框架太多,各有所需，各有所长。看看这幅图，估计都知道这些框架，但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点，不就是Html+Css+JavaScript吗，使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过，接触也快一年多了，所以这里准备写一...
BootStrap响应式导航条实例介绍
09-02
Bootstrap作为一款流行的前端框架，其响应式导航条设计的核心在于灵活性和适应性，使开发者能够轻松地创建出美观且功能强大的导航栏。 首先，Bootstrap框架是基于HTML5、CSS3和JavaScript构建的，它提供了丰富的...
基于Bootstrap的响应式静态网站设计源码
最新发布
04-17
本项目是基于Bootstrap开发的响应式静态网站设计源码，主要使用CSS进行开发。项目共包含26个文件，其中CSS样式文件5个，JPG图片文件5个，MAP文件4个，JavaScript源代码文件3个，PNG图片文件2个，Markdown文档文件1个...
Bootstrap响应式侧边栏导航菜单代码
06-05
Bootstrap响应式侧边栏导航菜单是现代网页设计中不可或缺的一部分，尤其在移动优先的设计策略下。Bootstrap框架以其灵活性和易用性，成为了构建此类菜单的首选工具。本资源提供的代码正是利用Bootstrap，jQuery以及...
HTML5 Bootstrap响应式手机导航下拉菜单代码
06-05
Bootstrap的核心特性之一就是响应式设计，这意味着网页会根据访问设备的屏幕尺寸自动调整布局，从而在不同设备上提供一致的视觉效果。 在这个"HTML5 Bootstrap响应式手机导航下拉菜单代码"中，开发者可以找到实现...
Bootstrap 响应式导航条
歪脖先生的博客
03-10 3390
响应式导航条响应式导航条能够根据浏览器窗口宽度，自动调整导航条的显示状态。一般会为响应式导航提供一个导航条和一个按钮。当浏览器窗口足够宽时，正常显示导航条而不显示按钮。当浏览器窗口宽度缩小到一定程度时，自动隐藏导航条并显示按钮。此时，用户点击按钮，隐藏的导航条就会显示出来。要使用Bootstrap中的响应式导航条，需要把导航条放在 .nav-collapse.collapse 的容器中，并添加一个...
Bootstrap响应式工具类
歪脖先生的博客
05-11 874
响应式工具类 Bootstrap提供了响应式类和打印机类。使用响应式类，可以针对不同设备显示或隐藏某些内容。使用工具类，可以针对打印机和浏览器显示或隐藏某些内容。 有针对性的使用这些工具类，可用避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类，可以在不同设备上提供不同的展现形式。 响应式类 响应式类中，以.visible-开头的类表示仅在某尺寸的屏幕上显示，在其他屏幕上都隐藏；...
bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏
热门推荐
方寸之间
11-30 4万+
bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏 .nav-logo{ float: left; height: 40px; margin-top: 5px; overflow: hidden; } .nav-logo a{
解析Bootstrap中nav、collapse的使用方法
jshyzx1999的博客
03-31 1250
一、导航分析（nav) 源码文件：_navs.scss：导航模块Mixins/_nav-divider.scss：分隔线Mixins/_nav-vertical-align.scss：垂直对齐 1、只是用css进行了样式修饰，对Js没有任何依赖 2、导航模块可以包含下拉模块 3、实现了水平、垂直、水平平均分配（table-cell实现，4.0移除）、tabs、胶囊等样式 4、Nav...
升级后的bootstrap3的navbar-brand、navbar-collapse、navbar-toggle、navbar-header、navbar-text、navbar-btn的小实验
跬步科技 的专栏
11-23 5534
navbar-brandnavbar-collapsenavbar-togglenavbar-headerbootstrap3 1、升级后的bootstrap 3.0.2版本的 这次试验的是navbar-brand、navbar-collapse、navbar-toggle、navbar-header、navbar-text、navbar-btn 除了navbar-text、navbar
Bootstrap3多级导航菜单 三级菜单
whx405831799的专栏
03-03 2万+
Bootstrap3多级导航菜单 AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuer
bootstrap pagewrapper_用Bootstrap3 做个导航栏
weixin_39613433的博客
12-21 293
导航栏元素在WEB上太常见了比如googlequery11.png微博weibo.png那么如何写出这样方便这样的组件使用bootstrap3吧！在网页中引入bootstrap3的方法见之前的文章直接说使用一般情况下导航放到如下的结构中nav标签第一层 class中 navbar是必须的 其他的属性是可选的添加navbar-default创建的是最基本的导航,不会固定在哪个位置...
bootstrap3导航栏高度（宽度）调节
pc_LI
01-15 1万+
最近在用bootstrap做一个网页的导航栏时，导航栏总是看上去很宽（很胖），像这样： 然而想要达到的效果是这样： 于是各种调样式，最后终于解决。 两个注意点： 1、bootstrap3导航栏有个最小的高度限制（应该是50px），要使用min-height把它改小。 2、只需要调节navbar的最小高度，navbar-nav的a（有brand再加上brand）的高度。 CSS代...
bootstrap3 - 导航（基础样式）
weixin_34138377的博客
09-28 247
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap 移动端响应式导航 代码
09-24
要在移动端创建响应式导航，我们可以使用Bootstrap提供的导航组件和CSS类。以下是一个例子： ```html <a class="navbar-brand" href="#">Logo <span class="navbar-toggler-icon"></span> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值