上一节:
下一节:

  Bootstrap 表单输入组

  • 定义和使用

    .input-group 类是通过在输入字段的前面或后面添加图标，文本或按钮作为“帮助文本”来增强输入的容器。
    使用 .input-group-prepend 将帮助文本添加到输入的前面，并使用 .input-group-append 将其添加到输入的后面。
    最后，添加 .input-group-text 类以设置指定帮助文本的样式。 
    <form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="用户名">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="电子邮箱">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>
</form>
    尝试一下
    输出结果如下：
    @
    @example.com
    提示：我们使用 .mb-3 实用程序类来确保输入组的边距底部正确。
    将 .input-group-sm 类用于小型输入组，将 .input-group-lg 用于大型输入组： 
    <form>
  <div class="input-group mb-3 input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text">小型</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">默认</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3 input-group-lg">
    <div class="input-group-prepend">
      <span class="input-group-text">大型</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
    尝试一下
    输出结果如下：
    小型
    默认
    大型

  • 多组输入框

    添加多个输入或插件： 
    <form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">人物</span>
    </div>
    <input type="text" class="form-control" placeholder="姓氏">
    <input type="text" class="form-control" placeholder="名字">
  </div>
</form>
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">按钮1</span>
      <span class="input-group-text">按钮2</span>
      <span class="input-group-text">按钮3</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
    尝试一下
    输出结果如下：
    人物
    按钮1 按钮2 按钮3

  • 带有复选框和单选框的输入组

    您也可以使用复选框或单选按钮代替文本： 
    <form>
 <div class="input-group mb-3">
   <div class="input-group-prepend">
     <div class="input-group-text">
       <input type="checkbox">
     </div>
   </div>
   <input type="text" class="form-control" placeholder="一些文本">
 </div>
  
 <div class="input-group mb-3">
   <div class="input-group-prepend">
     <div class="input-group-text">
       <input type="radio">
     </div>
   </div>
   <input type="text" class="form-control" placeholder="一些文本">
 </div>
</form>
    尝试一下
    输出结果如下：

  • 输入组按钮

    下面示例演示了输入组按钮的： 
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">默认按钮</button>
  </div>
  <input type="text" class="form-control" placeholder="一些文本">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="搜索">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">搜索</button>
  </div>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="一些文本">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">确定</button>
    <button class="btn btn-danger" type="button">取消</button>
  </div>
</div>
    尝试一下
    输出结果如下：

  • 带下拉按钮的输入组

    在输入组中添加一个下拉按钮；请注意，您不需要像通常那样使用 .dropdown 包装器。 
    <div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      下拉按钮
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="用户名">
</div>
    尝试一下
    输出结果如下：
    Link 1 Link 2 Link 3

  • 输入组标签

    将标签放在输入组之外，并记住for属性的值应与输入的ID相匹配。
    单击标签，它将使输入焦点： 
    <label for="demo">在这里写您的电子邮件：</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="输入您的电子邮件" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>
    尝试一下
    输出结果如下：
    @example.com

  • 相关页面

上一节:
下一节: