脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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复制文本框和表格的代码

    按钮JS复制文本框和表格的代码

    有时候我们需要复制一个框的内容或者整个表格，一般的操作很可能造成一些不方便，一是操作步骤较为复制，一是复制表格的时候容易复制不完整或者格式出错。
    2011-04-04
  • 使用BootStrap实现用户登录界面UI

    使用BootStrap实现用户登录界面UI

    本文给大家介绍使用BootStrap实现用户登录界面UI，布局风格采用左右各一半的风格设计，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-08
  • 基于javascript实现贪吃蛇小游戏

    基于javascript实现贪吃蛇小游戏

    这篇文章主要介绍了基于javascript实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JavaScript控制音频和视频的播放、暂停、音量

    JavaScript控制音频和视频的播放、暂停、音量

    HTML<video>元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放,你也可以将<video>标签用于音频内容,在前端中实现音频和视频播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript来控制这些媒体元素的播放、暂停、音量等属性
    2023-10-10
  • JavaScript实现公历转农历功能示例

    JavaScript实现公历转农历功能示例

    这篇文章主要介绍了JavaScript实现公历转农历功能,涉及javascript日期与时间相关操作及运算操作技巧,需要的朋友可以参考下
    2017-02-02
  • EditPlus注册码生成器(js代码实现)

    EditPlus注册码生成器(js代码实现)

    在线的EditPlus注册码生成器，看了看还真是，在这里exe的注册机病毒太多，纯js的在线注册机可就放心了，感兴趣的各位可以参考下哈，希望可以帮助到你
    2013-03-03
  • JavaScript中逗号运算符介绍及使用示例

    JavaScript中逗号运算符介绍及使用示例

    这篇文章主要介绍了JavaScript中逗号运算符介绍及使用示例,本文讲解了逗号运算符的定义、使用例子及实际使用的一些技巧,需要的朋友可以参考下
    2015-03-03
  • Javascript实现禁止输入中文或英文的例子

    Javascript实现禁止输入中文或英文的例子

    这篇文章主要介绍了Javascript实现禁止输入中文或英文的方法实例,本文方法都是使用正则表达式实现,需要的朋友可以参考下
    2014-12-12
  • ES6模块化的import和export用法方法总结

    ES6模块化的import和export用法方法总结

    这篇文章主要介绍了ES6模块化的import和export用法方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Django1.7+JQuery+Ajax验证用户注册集成小例子

    Django1.7+JQuery+Ajax验证用户注册集成小例子

    下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时，用户名存在不存在的一个小应用。注意，验证存在不存在使用的是Ajax的方式，不用让用户点击按钮验证是否存在,需要的朋友可以参考下
    2017-04-04

最新评论