bootstrap search bar

/* Perform style preview settings, the body reserves the navigation bar position of 50px, and the mylogo style is to display the chart*/
 < 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 >

View Code

 

<!--响应式导航条-->
<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/</a><Welcome to Intel>li>
            <li><a href="#">我们的产品</a></li>
            <li><a href="#">我们的服务</a></li>
          </ul>
        </li>
      </ul>
      <!--右侧侧-->
      <ul class="nav navbar-nav navbar-right">
        <li><</Simplified Chinese>="#"hrefaa ></ li > 
        < li >< a href ="#" > login </ a ></ li > 
      </ ul > 
      < form action ="#" class ="navbar-right navbar-form" > 
        < div class ="form-group has-feedback" > 
          <!-- has-feedback style/feedback control/ form-control-feedback After adding these two styles, the magnifying glass represented by span can be placed in the search bar --> 
          < label for ="search" class ="sr-only" >Search keywords </ 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</Query content
    div>
  </div>
</div>

View Code