bootstrap中搜索框怎么做-Tutorial Bootstrap-php.cn

bootstrap中搜索框怎么做

爱喝马黛茶的安东尼

Lepaskan： 2019-11-28 13:53:27

asal

19293 orang telah melayarinya

bootstrap中搜索框怎么做

在项目开发过程中，我们或多或少都会使用到搜索选项，那么如何制作一个标准，好看的搜索框呢？这里推荐bootstrap自带的一个控件input-group。

推荐手册：Bootstrap 中文手册

先简单看下对于这个控件官方的说明

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

Salin selepas log masuk

意思就是针对我们平常使用的表单提交功能，可以添加按钮，文本到输入栏的两边的位置。

相关推荐：《bootstrap入门教程》

下面的Contents的七个内容就是它能实现的几个基本功能，这里我们关注第四个button addons就可以了，其它的如果有兴趣可以自行学习。

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .
input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser 
styles that cannot 
be overridden.

Salin selepas log masuk

上面一段话就是指，在input groups里面的button和普通的不一样，它需要一个不一样的嵌套层次。其实简单来说，就是我们不再使用input-group-addon，而使用input-group-btn来管理按钮，我给出的demo代码如下所示：

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder="请输入字段名" / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search">查找</button>
               <button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
            </span>
 </div>

Salin selepas log masuk

最后出现的效果如下所示