bootstrap-输入框组

<!--
input-group             只能针对输入框,输入框组
input-group-addon        给输入框前后添加的额外元素
input-group-btn            添加的额外元素是按钮；
-->
<div class="container">
<div class="row">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
</div>

<!-- 额外内容里放的是checkbox / radio -->
<div class="row" style="margin-top:10px">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<input type="checkbox" />
</span>
<input type="text" class="form-control"/>
</div>
</div>
<div class="row" style="margin-top:10px">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<input type="radio" />
</span>
<input type="text" class="form-control"/>
</div>
</div>

<!-- 额外内容里放的是按钮-->
<div class="row" style="margin-top:10px">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default">搜索</button>
</span>
</div>
</div>

<!-- 额外内容里放的是按钮组/下拉菜单-->
<div class="row" style="margin-top:10px">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
学院课程 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
<input type="text" class="form-control"/>
</div>
</div>
</div>