本篇介绍将剖析和介绍输入框组的详细使用方法

输入框组

输入框组类-介绍

• <input> 表单输入框控件

• .input-group 输入框组基类

• .input-group-addon 输入框组添加额外“标签”js插件元素

• .input-group-btn 输入框添加额外“按钮”js插件元素

• .form-control 表单控件基础类，必须添加输入框组的效果才能生效

• .input-group-lg、.input-group-sm、.input-group-sm 控制按钮大小

与工具提示和弹出组合使用时

• .input-group 中如存在tooltip 工具提示或popover 弹出框，必须设置 container:'body'，增强兼容性减少意外效果失真

以下在输入框组件中禁止使用

• 禁用<select>元素

• 禁用<textarea>元素

• 禁止与其他类混合使用，栅格列.column、.btn-group中的专用类不能在输入框中使用

• 使用.input-group-addon和.input-group-btn时

• 输入框组任何单独一侧禁止添加多个额外js插件元素

• 输入框组中不支持多个表单控件，一个输入框仅应该包裹一个js插件元素 （例外：但允许有多个按钮）

创建输入框组基础示例

  <div class="container">
  <p>创建输入框基础示例</p>
    <div class="input-group">
      <span class="input-group-addon">￥</span>
      <input type="text" class="form-control" placeholder="仅支持人民币结算">
    </div>
    <br/>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="请填入申请备案的.com域名信息">
      <span class="input-group-addon" id="basic-addon2">.com</span>
    </div>
    <br/>
    <div class="input-group">
      <span class="input-group-addon">￥</span>
      <input type="text" class="form-control" placeholder="仅支持人民币结算">
      <span class="input-group-addon">.00</span>
    </div>
    <br/>
    <label for="basic-url">请填写备案人的邮箱信息</label>
    <div class="input-group">
      <span class="input-group-addon">填写范例：name@domain.com</span>
      <input type="text" class="form-control">
    </div>
  </div>

创建包含多选和单选框的输入框组

<div class="container">
  <p>创建包含多选和单选框的输入框组</p>
  <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>
    </div>
    <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>
    </div>
  </div></div>

创建包含按钮式下拉菜单的输入框组

<div class="container">
  <p>创建包含按钮式下拉菜单的输入框组</p>
  <div class="row">
    <div class="col-lg-6">
      <div class="input-group">
        <div class="input-group-btn">
          <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
            用户管理            <span class="caret"></span>
          </a>
          <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>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-lg-6">
      <div class="input-group">
        <input type="text" class="form-control">
          <div class="input-group-btn">
            <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
              用户管理              <span class="caret"></span>
            </a>
            <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>
      </div>
    </div>
  </div></div>

创建包含分裂式按钮下拉菜单的输入框组

<div class="container">
  <p>创建包含分裂式按钮下拉菜单的输入框组</p>
  <div class="row">
    <div class="col-lg-6">
      <div class="input-group">
        <div class=input-group-btn>
          <button type="button" class="btn btn-danger">用户管理</button>
          <button type="button" class="btn btn-danger 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>
      <input type="text" class="form-control">
    </div>  
    </div>
    <div class="col-lg-6">
      <div class="input-group">
        <input type="text" class="form-control">
        <div class=input-group-btn>

          <button type="button" class="btn btn-danger">用户管理</button>
          <button type="button" class="btn btn-danger 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>
      </div>
    </div>
  </div>

创建包含混合按钮的输入框组

<div class="container">
  <p>创建包含混合按钮的输入框组</p>
  <div class="row">
    <div class="col-lg-6">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </button>
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </button>
        </div>
        <input type="text" class="form-control" aria-label="...">
      </div>
    </div>
    <div class="col-lg-6">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="...">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-qrcode"></span>
          </button>
          <button type="button" class="btn btn-default">扫码录入</button>
        </div>
      </div>
    </div>
  </div></div>

本篇总结

• 输入框组作为表单的扩展，我们要分别掌握.input-group-addon和.input-group-btn的代码结构
  代码结构1：.input-group-addon 组合标签


• .input-group

• .input-group-addon

• js插件元素

• .form-control

• <button>、<input>

    代码结构2：.input-group-btn 组合按钮


• .input-group-btn

• js插件元素

• .form-control

• <button>、<input>

• 其中js插件元素和<input>等表单控件，要遵守禁用条件不能超过1个js插件元素或表单控件限制。（<button>不在此限制中）

• 表单控制必须使用.form-control这个表单控件的基础类，否则将不能被输入框组样式提供支持

Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap

书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.9.27 at home