除了基本的控件，作为对 HTML 表单控件的补充，Bootstrap 还为表单额外提供了一些非常实用的扩展控件。
输入框的前置和后置组件，是非常实用的控制控件。利用输入框的前置和后置组件，可以在输入框的前面或后面添加用户输入中的公共内容。如，可以为输入框前置人民币符号、电子邮件的 @ 符号、或其他公共的内容。
要在输入框的前面或后面添加内容，首先创建一个 .input-prepend 或 .input-append 的 <div>，然后在这个 <div> 中，把要前置或后置的内容放到一个 .add-on 的 <span> 中，再把这个 <span> 放到相应的 <input> 元素前面或后面。如：
<div class="input-prepend"><span class="add-on">@</span><input class="span2" type="text" placeholder="Username"></div><div class="input-append"><input class="span2" type="text"><span class="add-on">.00</span></div>
效果如图 3‑38所示：
图3-38 Bootstrap表单控件前置和后置内容
当然，你也可以在输入框的前面和后面同时添加内容。此时，就需要在父 <div> 中同时添加 .input-prepend 和 .input-append 类。如：
<div class="input-prepend input-append"><span class="add-on">$</span><input class="span2" type="text"><span class="add-on">.00</span></div>
效果如图 3‑39所示：
图3-39 Bootstrap表单控件同时前置和后置内容
此外，还可以使用带 .btn 类的 <button> 代替 <span>，在输入框的前面或后面添加一个或多个按钮。如：
<div class="input-append"><input class="span2" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button></div>
效果如图 3‑40所示：
图3-40 Bootstrap表单控件后置多个按钮
如果给搜索表单后置这么一个按钮，按钮也会像文本框一样带有圆弧。如：
<form class="form-search"><div class="input-append"><input type="text" class="span2 search-query"><button type="submit" class="btn">Search</button></div><div class="input-prepend"><button type="submit" class="btn">Search</button><input type="text" class="span2 search-query"></div></form>
效果如图 3‑41所示：
图3-41 Bootstrap为搜索表单添加按钮
还可以把按钮放在 .btn-group 的 <div> 中，来在按钮上创建下拉菜单。如：
<form><div class="input-append"><input class="span2" id="appendedDropdownButton" type="text"><div class="btn-group"><button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></div></div></form>
效果如图 3‑42所示：
图3-42 Bootstrap表单在按钮上创建下拉菜单
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
