基于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与WebMethod投票功能实现代码
Jan 19 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
js获取图片宽高的方法
Nov 25 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
javascript编程起步(第三课)
2007/02/27 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
database面试题
2013/03/28 面试题
大学同学聚会邀请函
2014/01/19 职场文书
小学教师师德反思
2014/02/03 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
举起手来观后感
2015/06/09 职场文书
外出培训学习心得体会
2016/01/18 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android