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

一、仿知乎导航栏


　<nav class="navbar navbar-default navbar-fixed-top">    
    <div class=container>               
      <div class="navbar-header">
        <a href="#" class="navbar-brand"><img src="img/zhihulogo.png" />a>       
      div>
      <form class="navbar-form 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>

 

 

样式如图所示

 二、响应式导航

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

<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">logoa>
      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">child1a>li>
              <li><a href="#d">child2a>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">logoa>
      div>
      <div id="myCollapse" class="navbar-collapse">             //此处复制了上面部分的代码，collapse这里可以忽略  - -！
        <ul class="nav navbar-nav">
          <li><a href="#a">firsta>li>                       //href 和 需要对应的位置的元素id 要对应
          <li><a href="#b">seconda>li>
          <li><a href="#c">thirda>li>
        ul>
      div>
    div>
  nav>
  <div id="a" class="pos">aaaadiv>
  <div id="b" class="pos">bbbbdiv>
  <div id="c" class="pos">ccccdiv>
body>