Bootstrap实现响应式导航栏效果


Posted in Javascript onDecember 28, 2015

为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件。
效果图:

Bootstrap实现响应式导航栏效果

下面的实例演示了这点:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 响应式的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="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="#">12345</a> 
 </div> 
 <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
 <ul class="nav navbar-nav"> 
  <li class="active"><a href="#">iOS</a></li> 
  <li><a href="#">fgghh</a></li> 
  <li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  Java <b class="caret"></b> 
  </a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">vgghhr</a></li> 
  <li><a href="#">dg</a></li> 
  <li><a href="#">sfg</a></li> 
  <li class="divider"></li> 
  <li><a href="#">分离的链接</a></li> 
  <li class="divider"></li> 
  <li><a href="#">另一个分离的链接</a></li> 
  </ul> 
  </li> 
 </ul> 
 </div> 
</nav> 
 
 
</body> 
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 #Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 #Javascript
Bootstrap实现默认导航栏效果
Sep 21 #Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 #Javascript
AngularJS进行性能调优的7个建议
Dec 28 #Javascript
浅析AngularJS Filter用法
Dec 28 #Javascript
jquery实现倒计时功能
Dec 28 #Javascript
You might like
使用PHP批量生成随机用户名
2008/07/10 PHP
php 随机生成10位字符代码
2009/03/26 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
Python设计模式之观察者模式实例
2014/04/26 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
为什么相对PHP黑python的更少
2020/06/21 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
大学生村官心得体会范文
2014/01/04 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
领导证婚人证婚词
2014/01/13 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
教师节慰问信
2015/02/15 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
Redis入门教程详解
2021/08/30 Redis