Bootstrap基础
Bootstrap框架
Bootstrap基本样式
排版
源代码
表格
表单
表单的基本控件
表单的可选布局
表单的默认布局
表单的扩展控件
除了基本的控件，作为对 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所示：
当然，你也可以在输入框的前面和后面同时添加内容。此时，就需要在父 <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所示：
此外，还可以使用带 .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所示：
如果给搜索表单后置这么一个按钮，按钮也会像文本框一样带有圆弧。如：
<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所示：
还可以把按钮放在 .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所示：
如果本教程对您帮助很大，请随意打赏。您的支持，将鼓励我写出更好的教程！
赏
