除了制作选项卡和下拉菜单，bootstrap还能编写出美观的网站导航栏

一、仿知乎导航栏

<body>
　<nav class="navbar navbar-default navbar-fixed-top">    <!--  navbar-default 指导航栏的默认样式   navbar-fixed-top 指导航栏在顶部固定定位 -->
    <div class=container>               <!--  将contianer放在 nav标签内可以保证导航栏在 左右方向上覆盖住整个窗口 -->
      <div class="navbar-header">
        <a href="#" class="navbar-brand"><img src="img/zhihulogo.png" /></a>       <!-- logo应该放在类名为 navbar-header  的div元素里 -->
      </div>
      <form class="navbar-form navbar-left">       <!--  navbar-left 指元素向左浮动 -->
        <div class="input-group">                  
          <input type="text" class="form-control" style="320px" placeholder="search your xxx"/>
          <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-search"></span></a></span>
        </div>
      </form>
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">首页</a></li>
        <li><a href="#">话题</a></li>
        <li><a href="#">发现</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册知乎</a></li>
        <li><a href="#">登录</a></li>
      </ul>
      <button class="btn btn-primary navbar-btn navbar-right">提问</button>
    </div>
  </nav>
</body>
<style>

body{margin-top: 50px;}
.myBtnStyle .dropdown-menu span{
margin:5px;
}
.myBtnStyle .dropdown-menu {
animation: 0.5s linear fadeIn;
}
@keyframes fadeIn {
0%{opacity:0;transform: translateY(-20);}
100%{opacity: 1;transform: translateY(0);}
}
tab-content {
border:1px solid #999; border-top: none;border-radius: 0 0 5px 5px;
}
.container {
width: 960px
}
.navbar-default{
background: linear-gradient(to bottom,#086ed5, #055db5) !important;
}
.navbar-header{
margin-top: -3px;
}
.navbar-nav a {
color:snow !important;
}

</style>

 

 

样式如图所示

 二、响应式导航

　　方便移动端，在窗口缩小的时候，可以将导航栏中的内容隐藏，点击导航栏中按钮后展开

<body>
   <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">                    //窗口缩小后显示的按钮也放在navbar-header中，和logo元素 navbar-brand 类同级；
          <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>　　　　//用三个icon-bar做出的按钮，三道杠，每个span各代表一条杠
        </button>
        <a href="#" class="navbar-brand">logo</a>
      </div>
      <div class="collapse navbar-collapse" id="myCollapse">              //将需要隐藏的内容放入collapse，设置一个id，和上面的data-target关联
        <ul class="nav navbar-nav">
          <li><a href="#a">第一个</a></li>
          <li><a href="#b">第二个</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">第三个 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#c">child1</a></li>
              <li><a href="#d">child2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
 </nav>
</body>

如图：

 

 

 

三、滚动监听导航

 　　对于比较长的网页，可以做出导航栏内元素和网页内容位置相对应的效果

<style>
  body{padding-top: 50px;}            //因为导航栏固定定位，所以给内容一个paddingTop让导航栏不挡住网页内容
  body{position: relative;height: 2000px;} //body需要相对定位
  .pos{margin-bottom: 500px;padding-top: 50px;} //填充内容  无实际意义
</style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="200">    //用data-spy="scroll" 来设置滚动监听， data-offset是用来调整元素对应的相应位置，对该数值尝试做出调整就可以体会到其作用
  <nav id="myNavbar" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">logo</a>
      </div>
      <div id="myCollapse" class="navbar-collapse">             //此处复制了上面部分的代码，collapse这里可以忽略  - -！
        <ul class="nav navbar-nav">
          <li><a href="#a">first</a></li>                       //href 和 需要对应的位置的元素id 要对应
          <li><a href="#b">second</a></li>
          <li><a href="#c">third</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="a" class="pos">aaaa</div>
  <div id="b" class="pos">bbbb</div>
  <div id="c" class="pos">cccc</div>
</body>