在项目开发过程中，我们或多或少都会使用到搜索选项，那么如何制作一个标准，好看的搜索框呢？这里推荐bootstrap自带的一个控件input-group。
推荐手册：Bootstrap 中文手册
先简单看下对于这个控件官方的说明
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual s.
Contents
Basic example
Sizing
Checkboxes and radio addons
Button addons
Buttons with dropdowns
Segmented buttons
Accessibility意思就是针对我们平常使用的表单提交功能，可以添加按钮，文本到输入栏的两边的位置。
相关推荐：《bootstrap入门教程》
下面的Contents的七个内容就是它能实现的几个基本功能，这里我们关注第四个button addons就可以了，其它的如果有兴趣可以自行学习。
Flex3组件和框架的生命周期 中文WORD版
下载
在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看
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.
上面一段话就是指，在input groups里面的button和普通的不一样，它需要一个不一样的嵌套层次。其实简单来说，就是我们不再使用input-group-addon，而使用input-group-btn来管理按钮，我给出的demo代码如下所示：
最后出现的效果如下所示
这样就很完美的显示出了搜索栏的选项，且风格保持了一致。
相关文章推荐：
1.Bootstrap Table 搜索框和查询功能详解
2.bootStrap-table服务器端后台分页及自定义搜索框的实现的使用
相关视频推荐：
1.独孤九贱(7)_Bootstrap视频教程
