如何使用bootstrap实现收缩导航条-创新互联

这篇文章将为大家详细讲解有关如何使用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>

关于“如何使用bootstrap实现收缩导航条”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：如何使用bootstrap实现收缩导航条-创新互联
网页URL：https://www.cdcxhl.com/article0/dcheoo.html

成都网站建设公司_创新互联，为您提供定制开发、微信公众号、静态网站、虚拟主机、网页设计公司、企业网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容