脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap实现响应式导航栏效果

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手写bind之处理new的情况详解

    JS手写bind之处理new的情况详解

    虽然很少会遇到给bind返回的函数做new操作的场景，但面试中还是会涉及到的，所以本文将实现一下兼容new操作的bind写法，顺便学习一下new操作符，需要的可以参考一下
    2022-07-07
  • JavaScript异步编程之Promise的初步使用详解

    JavaScript异步编程之Promise的初步使用详解

    这篇文章主要介绍了JavaScript异步编程之Promise的初步使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • js完美的div拖拽实例代码

    js完美的div拖拽实例代码

    文章实现的div拖拽程序可以根据按钮来控制是要种拖拽方式与位置 ，下面希望有需要的朋友可参考
    2014-01-01
  • 详解JavaScript函数对象

    详解JavaScript函数对象

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块，JavaScript 中的所有事物都是对象：字符串、数值、数组、函数，下面通过本文给大家介绍JavaScript函数对象，感兴趣的朋友一起学习吧
    2015-11-11
  • javascript生成随机数的方法

    javascript生成随机数的方法

    这篇文章主要介绍了javascript生成随机数的方法,需要的朋友可以参考下
    2014-05-05
  • js锚点、操作滚动条滑动scroll代码演示

    js锚点、操作滚动条滑动scroll代码演示

    滑动锚点挺有意思的,可增加一些浏览性,下面这篇文章主要给大家介绍了关于js锚点、操作滚动条滑动scroll的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • js限制输入框只能输入数字(onkeyup触发)

    js限制输入框只能输入数字(onkeyup触发)

    这篇文章主要介绍了通过js实现input输入框只能输入数字的实现方法，主要是通过正则表达式替换实现,需要的朋友可以参考下
    2018-09-09
  • Javascript中的return作用及javascript return关键字用法详解

    Javascript中的return作用及javascript return关键字用法详解

    本文给大家介绍Javascript中的return作用及javascript return关键字用法详解，对于大家学习javascript中的return知识有所帮助，感兴趣的朋友一起学习吧
    2015-11-11
  • JavaScript XML实现两级级联下拉列表

    JavaScript XML实现两级级联下拉列表

    用xml作为存储容器，不用数据库，速度和效率高些。
    2008-11-11
  • js中less常用的方法小结

    js中less常用的方法小结

    下面小编就为大家带来一篇js中less常用的方法小结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论