bootstrap搜索欄

/*進行樣式預習設置，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>