使用前需引入script

  1. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  2. integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  3. crossorigin="anonymous"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  5. integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
  6. crossorigin="anonymous"></script>
  7. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  8. integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  9. crossorigin="anonymous"></script>

1、输入框组,可拉伸框组

  1. <div class="form-row mt-5">
  2.     <div class="col">
  3.         <div class="form-group input-group">
  4.             <div class="input-group-prepend"><!-- 在前面添加 -->
  5.                 <span class="input-group-text">@</span>
  6.             </div>
  7.             <input type="text" class="form-control" placeholder="用户名">
  8.         </div>
  9.         <div class="form-group input-group">
  10.             <input type="text" class="form-control" placeholder="邮箱名">
  11.             <div class="input-group-append"><!-- 在后面添加 -->
  12.                 <span class="input-group-text">@example.com</span>
  13.             </div>
  14.         </div>
  15.         <div class="form-group input-group">
  16.             <div class="input-group-prepend">
  17.                 <span class="input-group-text">$</span>
  18.             </div>
  19.             <input type="text" class="form-control">
  20.             <div class="input-group-append">
  21.                 <span class="input-group-text">.00</span>
  22.             </div>
  23.         </div>
  24.         <!-- 左边，是网址 -->
  25.         <div class="form-group input-group">
  26.             <div class="input-group-prepend">
  27.                 <span class="input-group-text">https://example.com/users/</span>
  28.             </div>
  29.             <input type="text" class="form-control">
  30.         </div>
  31. 可拉伸框组：
  32.         <!-- textarea：可拉伸 -->
  33.         <div class="form-group input-group">
  34.             <div class="input-group-prepend"><!-- 主要为了和右侧保持一致 -->
  35.                 <span class="input-group-text">文本输入框</span>
  36.             </div>
  37.             <textarea class="form-control"></textarea><!-- ！！！ -->
  38.         </div>
  39. </div>
  40. </div>

2、尺寸：input-group-lg input-group-sm

  1. <div class="form-group input-group mt-5 input-group-lg">
  2.     <div class="input-group-prepend">
  3.         <span class="input-group-text">大尺寸</span>
  4.     </div>
  5.     <input type="text" class="form-control">
  6. </div>
  7. <div class="form-group input-group">
  8.     <div class="input-group-prepend">
  9.         <span class="input-group-text">正常尺寸</span>
  10.     </div>
  11.     <input type="text" class="form-control">
  12. </div>
  13. <div class="form-group input-group  input-group-sm">
  14.     <div class="input-group-prepend">
  15.         <span class="input-group-text">小尺寸</span>
  16.     </div>
  17.     <input type="text" class="form-control">
  18. </div>

3、多选框和单选框

  1. <div class="form-group input-group mt-5">
  2.     <div class="input-group-prepend">
  3.         <span class="input-group-text">
  4.             <input type="radio">
  5.         </span>
  6.     </div>
  7.     <input type="text" class="form-control">
  8. </div>
  9. <div class="form-group input-group">
  10.     <div class="input-group-prepend">
  11.         <span class="input-group-text">
  12.             <input type="checkbox">
  13.         </span>
  14.     </div>
  15.     <input type="text" class="form-control">
  16. </div>

4、多个输入框与多个额外组件

  1. <div class="form-group input-group mt-5">
  2.     <div class="input-group-prepend">
  3.         <span class="input-group-text">多个输入框</span>
  4.     </div>
  5.     <input type="text" class="form-control" placeholder="请输入姓">
  6.     <input type="text" class="form-control" placeholder="请输入名">
  7.     <input type="text" class="form-control">
  8. </div>
  9. <div class="form-group input-group">
  10.     <input type="text" class="form-control">
  11.     <div class="input-group-append">
  12.         <span class="input-group-text">$</span>
  13.         <span class="input-group-text">0.00</span>
  14.     </div>
  15. </div>

5、按钮组合

  1. <div class="form-group input-group mt-5">
  2.     <div class="input-group-prepend">
  3.         <button class="btn btn-outline-secondary">左按钮</button>
  4.         <!-- btn-outline-secondary：实心按钮颜色 -->
  5.     </div>
  6.     <input type="text" class="form-control">
  7. </div>
  8. <div class="form-group input-group">
  9.     <input type="text" class="form-control">
  10.     <div class="input-group-append">
  11.         <button class="btn btn-outline-secondary">右按钮</button>
  12.     </div>
  13. </div>

6、多个按钮：按照按钮组的形式出现

  1. <div class="form-group input-group">
  2.     <div class="input-group-prepend">
  3.         <button class="btn btn-outline-secondary">左按钮</button>
  4.         <button class="btn btn-outline-secondary">左按钮</button>
  5.     </div>
  6.     <input type="text" class="form-control">
  7. </div>
  8. <div class="form-group input-group">
  9.     <input type="text" class="form-control">
  10.     <div class="input-group-append">
  11.         <button class="btn btn-outline-secondary">右按钮</button>
  12.         <button class="btn btn-outline-secondary">右按钮</button>
  13.     </div>
  14. </div>

7、带下拉列表的按钮组合

  1. <div class="form-group input-group mt-5">
  2.     <div class="input-group-prepend">
  3.         <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">左侧下拉菜单</button>
  4.         <div class="dropdown-menu">
  5.             <a href="#" class="dropdown-item">北京</a>
  6.             <a href="#" class="dropdown-item">上海</a>
  7.             <a href="#" class="dropdown-item">广州</a>
  8.             <div class="dropdown-divider"></div>
  9.             <a href="#" class="dropdown-item">深圳</a>
  10.         </div>
  11.     </div>
  12.     <input type="text" class="form-control">
  13. </div>
  14. <div class="form-group input-group">
  15.     <input type="text" class="form-control">
  16.     <div class="input-group-append">
  17.         <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">右侧下拉菜单</button>
  18.         <div class="dropdown-menu">
  19.             <a href="#" class="dropdown-item">北京</a>
  20.             <a href="#" class="dropdown-item">上海</a>
  21.             <a href="#" class="dropdown-item">广州</a>
  22.             <div class="dropdown-divider"></div>
  23.             <a href="#" class="dropdown-item">深圳</a>
  24.         </div>
  25.     </div>
  26. </div>

8、分离式按钮与input组合

  1. <div class="form-group input-group mt-5">
  2.     <div class="input-group-prepend">
  3.         <button class="btn btn-outline-success">分离式左侧下拉菜单</button>
  4.         <button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
  5.             data-toggle="dropdown"></button>
  6.         <div class="dropdown-menu">
  7.             <a href="#" class="dropdown-item">北京</a>
  8.             <a href="#" class="dropdown-item">上海</a>
  9.             <a href="#" class="dropdown-item">广州</a>
  10.             <div class="dropdown-divider"></div>
  11.             <a href="#" class="dropdown-item">深圳</a>
  12.         </div>
  13.     </div>
  14.     <input type="text" class="form-control">
  15. </div>
  16. <div class="form-group input-group">
  17.     <input type="text" class="form-control">
  18.     <div class="input-group-append">
  19.         <button class="btn btn-outline-success">分离式左侧下拉菜单</button>
  20.         <button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
  21.             data-toggle="dropdown"></button>
  22.         <div class="dropdown-menu">
  23.             <a href="#" class="dropdown-item">北京</a>
  24.             <a href="#" class="dropdown-item">上海</a>
  25.             <a href="#" class="dropdown-item">广州</a>
  26.             <div class="dropdown-divider"></div>
  27.             <a href="#" class="dropdown-item">深圳</a>
  28.         </div>
  29.     </div>
  30. </div>

9、自定义表单组合-自定义选择（下拉框）

  1. <div class="form-group input-group mt-5">
  2.     <div class="input-group-prepend">
  3.         <label for="select1" class="input-group-text">label标签在左边</label>
  4.     </div>
  5.     <select class="custom-select" id="select1"><!-- label和class="custom-select" -->
  6.         <option value="">城市</option>
  7.         <option value="">北京</option>
  8.         <option value="">上海</option>
  9.         <option value="">广州</option>
  10.     </select>
  11. </div>
  12. <div class="form-group input-group">
  13.     <select class="custom-select" id="select2">
  14.         <option value="">城市</option>
  15.         <option value="">北京</option>
  16.         <option value="">上海</option>
  17.         <option value="">广州</option>
  18.     </select>
  19.     <div class="input-group-append">
  20.         <label for="select2" class="input-group-text">label标签在右边</label>
  21.     </div>
  22. </div>

button：

  1. <div class="form-group input-group">
  2.     <div class="input-group-prepend">
  3.         <button class="btn btn-outline-danger">button标签在左边</label>
  4.     </div>
  5.     <select class="custom-select">
  6.         <option value="">城市</option>
  7.         <option value="">北京</option>
  8.         <option value="">上海</option>
  9.         <option value="">广州</option>
  10.     </select>
  11. </div>
  12. <div class="form-group input-group">
  13.     <select class="custom-select">
  14.         <option value="">城市</option>
  15.         <option value="">北京</option>
  16.         <option value="">上海</option>
  17.         <option value="">广州</option>
  18.     </select>
  19.     <div class="input-group-append">
  20.         <button class="btn btn-outline-danger">button标签在右边</label>
  21.     </div>
  22. </div>

10、自定义表单组合-自定义文件

文字：

  1. <div class="form-group input-group mt-5">
  2.     <div class="input-group-prepend">
  3.         <span class="input-group-text">上传在左边</span>
  4.     </div>
  5.     <div class="custom-file">
  6.         <input type="file" class="custom-file-input" id="file1">
  7.         <label for="file1" class="custom-file-label"></label><!-- label：伪类默认出现browse？？？ -->
  8.     </div>
  9. </div>
  10. <div class="form-group input-group">
  11.     <div class="custom-file">
  12.         <input type="file" class="custom-file-input" id="file2">
  13.         <label for="file2" class="custom-file-label"></label>
  14.     </div>
  15.     <div class="input-group-append">
  16.         <span class="input-group-text">上传在右边</span>
  17.     </div>
  18. </div>

按钮：

<div class="form-group input-group">
    <div class="input-group-prepend">
        <button class="btn btn-outline-secondary">按钮在左边</span>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="file1">
        <label for="file1" class="custom-file-label"></label>
    </div>
</div>
<div class="form-group input-group">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="file2">
        <label for="file2" class="custom-file-label"></label>
    </div>
    <div class="input-group-append">
        <button class="btn btn-outline-secondary">按钮在右边</span>
    </div>
</div>