基于bootstrap实现收缩导航条

更新时间：2020-04-30 07:36:01 作者：startmvc

本文实例为大家分享了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>

这就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。