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 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
JS随机数产生代码分享
Feb 24 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 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 默默经典版本
2009/08/04 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
中止javascript执行的方法
2014/02/14 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
班组长安全职责
2014/01/05 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
劳资员岗位职责
2015/02/13 职场文书
项目战略合作意向书
2015/05/08 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Python多线程 Queue 模块常见用法
2021/07/04 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python