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 -->