时间:2016-02-12 13:29 来源: 我爱IT技术网 作者:佚名
欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【Bootstrap实现响应式导航栏效果】，下面是详细的讲解！
Bootstrap实现响应式导航栏效果
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 响应式的导航栏</title> <link href="http://www.jb51.net/article/bootstrap.min.css" rel="stylesheet"> <script src="http://www.jb51.net/article/jquery-2.1.4.min.js"></script> <script src="http://www.jb51.net/article/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.jb51.net/article/77106.htm#">12345</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="http://www.jb51.net/article/77106.htm#">iOS</a></li> <li><a href="http://www.jb51.net/article/77106.htm#">fgghh</a></li> <li class="dropdown"> <a href="http://www.jb51.net/article/77106.htm#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="http://www.jb51.net/article/77106.htm#">vgghhr</a></li> <li><a href="http://www.jb51.net/article/77106.htm#">dg</a></li> <li><a href="http://www.jb51.net/article/77106.htm#">sfg</a></li> <li class="divider"></li> <li><a href="http://www.jb51.net/article/77106.htm#">分离的链接</a></li> <li class="divider"></li> <li><a href="http://www.jb51.net/article/77106.htm#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </nav> </body> </html>
关于Bootstrap实现响应式导航栏效果的用户互动如下：
相关问题：用bootstrap做的响应式导航，可是没效果，这是为什么
答：用bootstrap的栅格系统做前端界面，但是做出的网页是响应式的，怎么能够... 你不想做非响应式，还是不要用这个框架就行了。当然还有以下方法 禁止响应式布局有如下几步： 移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：。 通... >>详细
相关问题：怎么用css制作一个响应式布局的导航栏
答：这样的你需要使用到css样式 你可以去了解下 Media Queries 响应媒体查询 你可以多去参考一些比较前沿的网站 比如 ipbun.cn 这样网站的响应式做的不错 >>详细
相关问题：怎么把bootstrap做的网站布局设为响应式
答：bootstrap默认就是响应式的，除非你在css里面加了 .container { width:1170px;max-width:none !important;}这样的话页面就会固定布局，其他的不管你怎么调，只要都用bootstrap的样式class包含住就可以了！ 至于你说的：“桌面浏览器上，显示为一... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-