- codingsoho.com

博客五部曲之二 - 高级博客

10 Bootstrap Input Group

本节用bootstrap的input group让我们的搜索输入更加好看

https://getbootstrap.com/docs/3.3/components/#input-groups

group由搜索输入框和提交按钮两个组成

<form class="row" method="GET" action="">
  <div class="col-sm-6">
    <div class="input-group">
      <input class="form-control" type="text" name="q" placeholder="Search posts" value="{{request.GET.q}}" />
      <span class="input-group-btn">
        <input class="btn btn-default" type="submit" value="Search" />                
      </span>
    </div>
  </div>
</form>

代码修改为以上形式，首先放内容都放到input-group里面，并对input添加class form-control，给按钮添加class “btn btn-default”。给提交按钮放到了<span>内部，并添加class “input-group-btn”，否则搜索按钮就到了下一行

效果如下

下面简单介绍一下如何利用fontawsome来讲seach字符换成图标

收入将cdn https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css放入 base.html, 用cdn的原因是运行浏览器缓存，这样能提高你的访问速度。
输入按钮代码修改为如下

<button class="btn btn-default" type="submit"><i class="fa fa-search"></i> </button>

效果如下

有的版本的bootstrap按钮的高度可能跟输入框不一致，这个时候可以加个字符（比如！）来调节一下使其一致。