Bootstrap实现响应式导航栏效果

 更新时间:2015年12月28日 14:06:45   作者:林炳文Evankaka  
这篇文章主要介绍了Bootstrap实现响应式导航栏效果,导航栏是一个很好的功能,是Bootstrap网站的一个突出特点,本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下

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

下面的实例演示了这点:

<!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实战教程

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

相关文章

  • JS库之ParticlesJS使用简介

    JS库之ParticlesJS使用简介

    ParticlesJS是一个轻量级的创建粒子背景的 JavaScript 库,接下来通过本文给大家分享JS库之ParticlesJS使用简介,感兴趣的朋友一起看看吧
    2017-09-09
  • 每个 JavaScript 工程师都应懂的33个概念

    每个 JavaScript 工程师都应懂的33个概念

    这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习( JavaScript )中,可以作为一篇指南,需要的朋友可以参考下
    2018-10-10
  • javascript实现的简单计时器

    javascript实现的简单计时器

    计时器提供了一 个可以将代码片段异步延时执行的能力,javascript生来是单线程的(在一定时间范围内仅一部分js代码能运行),计时器为我们提供了一种避开这种 限制的方法,从而开辟了另一条执行代码的蹊径。
    2015-07-07
  • 浅谈js之字面量、对象字面量的访问、关键字in的用法

    浅谈js之字面量、对象字面量的访问、关键字in的用法

    下面小编就为大家带来一篇浅谈js之字面量、对象字面量的访问、关键字in的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 再谈Javascript中的基本类型和引用类型(推荐)

    再谈Javascript中的基本类型和引用类型(推荐)

    这篇文章主要介绍了Javascript中的基本类型和引用类型的相关资料,包括基本类型和引用类型的概念及区别,数据类型检测给大家详细介绍了js基本类型和引用类型,非常不错,需要的朋友可以参考下
    2016-07-07
  • javascript设计模式 – 迭代器模式原理与用法实例分析

    javascript设计模式 – 迭代器模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 迭代器模式原理与用法,结合实例形式分析了javascript迭代器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • jfreechart插件将数据展示成饼状图、柱状图和折线图

    jfreechart插件将数据展示成饼状图、柱状图和折线图

    闲暇之余,学习了一下jfreechart图表生成,结合大虾们的著作,小弟进行了系统的总结,真是获益匪浅,这里推荐给小伙伴们,有需要的朋友可以参考下。
    2015-04-04
  • JavaScript 更严格的相等 [译]

    JavaScript 更严格的相等 [译]

    大部分JavaScript程序员都知道:应该使用严格相等(===)来代替“普通”的相等操作(==).但是,有时候你的确需要一个比严格相等===更严格的运算符,比如说:在你想检查某个值是否是NaN的时候,又或者你想区分-0和+0的时候.本文解释了相关的知识以及ECMAScript.next中的解决办法:“is”操作符
    2012-09-09
  • html+css+js实现xp window界面及有关功能

    html+css+js实现xp window界面及有关功能

    xp window界面及有关功能使用前端技术实现不可思议吧不够该程序在IE调试的,其他浏览器可能有BUG,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-03-03
  • 深入分析js中的constructor和prototype

    深入分析js中的constructor和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要
    2012-04-04

最新评论