zoukankan      html  css  js  c++  java
  • 基于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">
     <!-- viewport的宽度
       width=divice-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>
  • 相关阅读:
    CSS3选择器
    在sublimen中整理CSS代码及其兼容性问题
    sublime 插件安装
    sublime 使用快捷键
    HTML5标签选择,图文混排使用dl dt dd
    HTML布局
    分页器
    Django ==> Form 组件
    Django ==> ModelAdmin
    前端 ==> Ajax
  • 原文地址:https://www.cnblogs.com/lang2017/p/7210845.html
Copyright © 2011-2022 走看看