基本类型

@gmail.com

@

@


<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名">
  <span class="input-group-addon"><i class="icon icon-heart"></i></span>
</div>

消除双边框

当按钮处于两个文本框中间时,需要在.input-group-addon上添加样式修复工具类.fix-border

连续分段的文本框

有时可能需要连续分段的文本框。这时需要在两个相邻的.form-control元素之间添加一个空的.input-group-addon,并同时添加工具栏

兼容IE浏览器

因为IE8不支持:empty选择器,为兼容IE8浏览器,需要在.input-group-addon上添加额外的样式修复工具类.fix-padding

姓名
<div class="input-group">
  <span class="input-group-addon">姓名</span>
  <input type="text" class="form-control" placeholder="姓氏">
  <span class="input-group-addon fix-border fix-padding"></span>
  <input type="text" class="form-control" placeholder="名字">
</div>

单选框和复选框

<!-- 复选框 -->
<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox">
  </span>
  <input type="text" class="form-control">
</div>
<!-- 单选框 -->
<div class="input-group">
  <span class="input-group-addon">
    <input type="radio">
  </span>
  <input type="text" class="form-control">
</div>

带按钮

消除双边框

当按钮处于两个文本框中间时,需要在.input-group-btn上添加样式修复工具类.fix-border



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

带下拉菜单的按钮

<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" role="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>
</div>

使用Select

浏览器兼容性问题

通常并不推荐在输入框组中使用select元素。这样可能会带来难以处理的兼容性问题。推荐使用 Dropdown 或者 Chosen来代替下拉列表。

地址
<div class="input-group">
  <select class="form-control">
    <option value="eat">吃饭</option>
    <option value="sleep">睡觉</option>
    <option value="code">写代码</option>
  </select>
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">搜索</button>
  </span>
</div>

分段按钮

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" tabindex="-1">主要选项</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
      <span class="caret"></span>
      <span class="sr-only">更多选项</span>
    </button>
    <ul class="dropdown-menu pull-right" role="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>
</div>