《程序猿的第n+2天》bootstrap收缩导航条

最新推荐文章于 2024-04-03 11:11:46 发布

焦虑的说说

最新推荐文章于 2024-04-03 11:11:46 发布

阅读量796

点赞数

分类专栏： bootstrap 文章标签： bootstrap 响应式折叠导航

本文链接：https://blog.csdn.net/sinat_35803474/article/details/62275259

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图
这里写图片描述

贴上我的代码

<!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="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" 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>

这就完成了

焦虑的说说

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
《程序猿的第n+2天》bootstrap收缩导航条

效果图贴上我的代码<!DocType html><html><head> <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
复制链接

扫一扫