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>

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></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>

View Code

 

 

转载于:https://www.cnblogs.com/shuen/p/9001924.html