/*进行样式预习设置，body预留导航栏位置50px,mylogo样式是给把图表显示出来*/

<style>

  body{margin-top: 50px;

  }

  .my-logo{

    display: inline-block;

    width: 63px;

    height: 42px;

    background: url("img/hdr-spr.png") 0px -512px no-repeat;

    margin-top: 3px;

  }

</style>

<!--响应式导航条-->

<div class="navbar navbar-default navbar-fixed-top">

  <div class="container">

    <div class="navbar-header">

      <a href="#mytoggle" class="navbar-toggle" data-toggle="collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </a>

      <a href="#" class="navbar-brand my-logo"></a>

    </div>

    <div class="collapse navbar-collapse" id="mytoggle">

      <!--左侧-->

      <ul class="nav navbar-nav">

        <li><a href="#">首页</a></li>

        <li><a href="#">产品</a></li>

        <li><a href="#">热点</a></li>

        <li class="dropdown">

          <a href="#" data-toggle="dropdown">菜单</a>

          <ul class="dropdown-menu">

            <li><a href="#">欢迎来到英特尔</a></li>

            <li><a href="#">我们的产品</a></li>

            <li><a href="#">我们的服务</a></li>

          </ul>

        </li>

      </ul>

      <!--右侧侧-->

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">简体中文</a></li>

        <li><a href="#">登录</a></li>

      </ul>

      <form action="#" class="navbar-right navbar-form">

        <div class="form-group has-feedback">

          <!--has-feedback样式/反馈控制/ form-control-feedback 增加这两个样式后，span代表的放大镜就可以放在搜索栏里面-->

          <label for="search" class="sr-only">搜索关键字</label>

          <input type="search" placeholder="请输入" id="search" class="form-control">

          <span class="glyphicon glyphicon-search  form-control-feedback"></span>

        </div>

      </form>

      <span class="navbar-right navbar-text">|</span>

      <a href="#" class="navbar-link navbar-text navbar-right">查询内容</a>

    </div>

  </div>

</div>