基于bootstrap实现收缩导航条


Posted in Javascript onMarch 17, 2017

本文实例为大家分享了bootstrap实现收缩导航条的具体代码,供大家参考,具体内容如下

效果图

基于bootstrap实现收缩导航条

贴上我的代码

<!DocType html>
<html>
<head>
 <meta charset="utf-8">
 <!--设置浏览器优先使用什么模式来渲染页面-->
 <!--告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=divice-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 <!-- width:viewport的宽度
   width=divice-width:viewport的宽度 
   initial-scale:初始的缩放比例 
   maxmum-scale:允许用户缩放的最大比例
   user-scalable:是否允许用户手动缩放
 ---> 

 <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> 
 </head>
 <body>

  <ul class="navbar navbar-default navbar-fixed-top">
  <!--navbar表示导航条
    navbar-defaule默认导航条样式
    navbar-fixed-top导航固定在顶部-->
  <div class="container-fluid">
   <!--导航头部-->
   <div class="navbar-header">
    <a href="index.html" rel="external nofollow" class="navbar-brand">
    <span class="glyphicon glyphicon-home">
    </span>
    <!--导航折叠按钮-->
    <button class="navbar-toggle" data-toggle="collspan" data-target="#divNav">

    <!---   navbar-toggle:【触发】按钮,会有下拉导航    data-toggle:交替执行某动作,collapse:展开和收缩
          data-target:目标对象(自己定义一个名字-->

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <!--按钮里的内容,三条横杠-->

    </button>
    <!--点击按钮将显示的导航栏目-->
    <div id="divNav" class="collapse nav-collapse">
     <!--这里的div的id要和上面的data-target值一致,nav-collapse就是折叠导航--->
     <ul class="nav navbar-nav">
      <li>首页</li>
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
     </ul>
    </div>
   </div>
  </div> 
  </ul>
 </body>
</html>

这就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
JavaScript 创建对象
Jul 17 Javascript
jQuery参数列表集合
Apr 06 Javascript
浅析node.js中close事件
Nov 26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
JS随机密码生成算法
Sep 23 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
javascript基本数据类型和转换
Mar 17 #Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 #Javascript
js实现一键复制功能
Mar 16 #Javascript
js判断PC端与移动端跳转
Dec 24 #Javascript
jquery编写日期选择器
Mar 16 #Javascript
jquery事件与绑定事件
Mar 16 #Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
短波的认识
2021/03/01 无线电
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python异常处理知识点总结
2019/02/18 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
转党组织关系介绍信
2014/01/08 职场文书
法务专员岗位职责
2015/02/14 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
php修改word的实例方法
2021/11/17 PHP
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技