Bootstarp学习教程（11） 输入框组组件

基本案例：通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。

	<div class="input-group"> 
		<span class="input-group-addon">@</span> <input type="text" 
			class="form-control" placeholder="Username"> 
	</div> 
 
	<div class="input-group"> 
		<input type="text" class="form-control"> <span 
			class="input-group-addon">.00</span> 
	</div> 
 
	<div class="input-group"> 
		<span class="input-group-addon">$</span> <input type="text" 
			class="form-control"> <span class="input-group-addon">.00</span> 
	</div> 

尺寸:input-group添加标明尺寸的class，它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。

<div class="input-group input-group-lg"> 
  <span class="input-group-addon">@</span> 
  <input type="text" class="form-control" placeholder="Username"> 
</div> 
 
<div class="input-group"> 
  <span class="input-group-addon">@</span> 
  <input type="text" class="form-control" placeholder="Username"> 
</div> 
 
<div class="input-group input-group-sm"> 
  <span class="input-group-addon">@</span> 
  <input type="text" class="form-control" placeholder="Username"> 
</div>

复选框与单选框:可以把复选框或单选框放在输入组里而不是文本前。

<div class="row"> 
  <div class="col-lg-6"> 
    <div class="input-group"> 
      <span class="input-group-addon"> 
        <input type="checkbox"> 
      </span> 
      <input type="text" class="form-control"> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
  <div class="col-lg-6"> 
    <div class="input-group"> 
      <span class="input-group-addon"> 
        <input type="radio"> 
      </span> 
      <input type="text" class="form-control"> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
</div><!-- /.row -->

附加按钮:要用 .input-group-btn 包住按钮而不是 .input-group-addon。这是因为默认的浏览器样式不能被覆盖

	<div class="row"> 
			<div class="col-lg-6"> 
				<div class="input-group"> 
					<span class="input-group-btn"> 
						<button class="btn btn-default" type="button">搜索</button> </span> <input 
						type="text" class="form-control"> 
				</div> 
				<!-- /input-group --> 
			</div> 
			<!-- /.col-lg-6 --> 
			<div class="col-lg-6"> 
				<div class="input-group"> 
					<input type="text" class="form-control"> <span 
						class="input-group-btn"> 
						<button class="btn btn-default" type="button">搜索</button> </span> 
				</div> 
				<!-- /input-group --> 
			</div> 
			<!-- /.col-lg-6 --> 
		</div> 
		<!-- /.row --> 
 
	</div>

带下拉菜单的按钮:

<div class="row"> 
  <div class="col-lg-4"> 
    <div class="input-group"> 
      <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">链接按钮 <span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
          <li><a href="#">链接一</a></li> 
          <li><a href="#">链接二</a></li> 
          <li><a href="#">其他链接</a></li> 
          <li class="divider"></li> 
          <li><a href="#">指定链接</a></li> 
        </ul> 
      </div><!-- /btn-group --> 
      <input type="text" class="form-control"> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
  <div class="col-lg-4"> 
    <div class="input-group"> 
      <input type="text" class="form-control"> 
      <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">链接按钮 <span class="caret"></span></button> 
        <ul class="dropdown-menu pull-right"> 
          <li><a href="#">链接一</a></li> 
          <li><a href="#">链接二</a></li> 
          <li><a href="#">其他链接</a></li> 
          <li class="divider"></li> 
          <li><a href="#">指定链接</a></li> 
        </ul> 
      </div><!-- /btn-group --> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
</div><!-- /.row -->