基于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 相关文章推荐
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
Node.js简单入门前传
Aug 21 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
织梦模板标记简介
2007/03/11 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python实现的简单模板引擎功能示例
2017/09/02 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
在python中安装basemap的教程
2018/09/20 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
会计求职信范文
2014/05/24 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
小学信息技术教学反思
2016/02/16 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL