基于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 函数的副作用分析
Aug 23 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
详解参数传递四种形式
Jul 21 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
vue 文件目录结构详解
Nov 24 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
es6函数之严格模式用法实例分析
Mar 17 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年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
其他功能
2006/10/09 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python画微信表情符的实例代码
2019/10/09 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
js实现弹框效果
2021/03/24 Javascript
教师批评与自我批评(群众路线)
2014/10/15 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015年仓库工作总结
2015/04/09 职场文书
感恩主题班会教案
2015/08/12 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript