Input输入框及输入框群组(Input-group)

    在input的任何一侧放置一个附加组件或按钮，您也可以在Input输入框的两面各放置一个组件（或按钮），我们不支持单个输入组合中有多个表单控制项，同时必须在输入框组之外。

    包装

    默认情况下，输入组通过flex-wrap: wrap 以便在输入组中容纳自定义表单字段验证.N你可以使用以下命令禁用此功能 .flex-nowrap.

    输入框(Input-group) - 图2

    1. <div class="input-group flex-nowrap">
    2.   <div class="input-group-prepend">
    3.     <span class="input-group-text" id="addon-wrapping">@</span>
    4.   </div>
    5.   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
    6. </div>

    规格尺寸定义

    将相对表单大小的class样式加到 .input-group中，其内容会自动调整大小，如.input-group-lg、.input-group-sm，不需要在每个元素上重重使用样式控制其大小。

    1. <div class="input-group input-group-sm mb-3">
    2.   <div class="input-group-prepend">
    3.     <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    4.   </div>
    5.   <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
    6. </div>
    8. <div class="input-group mb-3">
    9.   <div class="input-group-prepend">
    10.     <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
    11.   </div>
    12.   <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    13. </div>
    15. <div class="input-group input-group-lg">
    16.   <div class="input-group-prepend">
    17.     <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    18.   </div>
    19.   <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
    20. </div>

    输入框(Input-group) - 图4

    多个输入

    尽管可视化支持多个 <input>但验证样式仅适用于具有单个<input>的输入组。

    1. <div class="input-group">
    2.   <div class="input-group-prepend">
    3.     <span class="input-group-text" id="">First and last name</span>
    4.   </div>
    5.   <input type="text" class="form-control">
    6.   <input type="text" class="form-control">
    7. </div>

    多类型控件组合

    支持多种控件结合，比如复选框和、文本、input框混合使用。

    输入框(Input-group) - 图6

    1. <div class="input-group mb-3">
    2.   <div class="input-group-prepend">
    3.     <span class="input-group-text">$</span>
    4.     <span class="input-group-text">0.00</span>
    5.   </div>
    6.   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    8. <div class="input-group">
    9.   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    10.   <div class="input-group-append">
    11.     <span class="input-group-text">$</span>
    13.   </div>
    14. </div>

    带下拉列表的按钮组合

    1. <div class="input-group mb-3">
    2.   <div class="input-group-prepend">
    3.     <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    4.     <div class="dropdown-menu">
    5.       <a class="dropdown-item" href="#">Action</a>
    6.       <a class="dropdown-item" href="#">Another action</a>
    7.       <a class="dropdown-item" href="#">Something else here</a>
    8.       <div role="separator" class="dropdown-divider"></div>
    9.       <a class="dropdown-item" href="#">Separated link</a>
    10.     </div>
    11.   </div>
    12.   <input type="text" class="form-control" aria-label="Text input with dropdown button">
    13. </div>
    15. <div class="input-group">
    16.   <input type="text" class="form-control" aria-label="Text input with dropdown button">
    17.   <div class="input-group-append">
    18.     <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    19.     <div class="dropdown-menu">
    20.       <a class="dropdown-item" href="#">Action</a>
    21.       <a class="dropdown-item" href="#">Another action</a>
    22.       <a class="dropdown-item" href="#">Something else here</a>
    23.       <div role="separator" class="dropdown-divider"></div>
    24.       <a class="dropdown-item" href="#">Separated link</a>
    25.     </div>
    26.   </div>
    27. </div>

    分裂式按钮与input组合

    输入框(Input-group) - 图9

    1. <div class="input-group mb-3">
    2.   <div class="input-group-prepend">
    3.     <button type="button" class="btn btn-outline-secondary">Action</button>
    4.     <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    5.       <span class="sr-only">Toggle Dropdown</span>
    6.     </button>
    7.     <div class="dropdown-menu">
    8.       <a class="dropdown-item" href="#">Action</a>
    9.       <a class="dropdown-item" href="#">Another action</a>
    10.       <a class="dropdown-item" href="#">Something else here</a>
    11.       <div role="separator" class="dropdown-divider"></div>
    12.       <a class="dropdown-item" href="#">Separated link</a>
    13.     </div>
    14.   </div>
    15.   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
    16. </div>
    18.   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
    19.   <div class="input-group-append">
    20.     <button type="button" class="btn btn-outline-secondary">Action</button>
    21.     <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    22.       <span class="sr-only">Toggle Dropdown</span>
    24.     <div class="dropdown-menu">
    25.       <a class="dropdown-item" href="#">Action</a>
    26.       <a class="dropdown-item" href="#">Another action</a>
    27.       <a class="dropdown-item" href="#">Something else here</a>
    28.       <div role="separator" class="dropdown-divider"></div>
    29.       <a class="dropdown-item" href="#">Separated link</a>
    30.     </div>
    31.   </div>
    32. </div>

    输入组包括对自定义选择和自定义文件输入的支持。 这些浏览器的默认版本不受支持。

    自定义文件输入

    输入框(Input-group) - 图11

    1. <div class="input-group mb-3">
    2.   <div class="input-group-prepend">
    3.     <span class="input-group-text">Upload</span>
    4.   </div>
    5.   <div class="custom-file">
    6.     <input type="file" class="custom-file-input" id="inputGroupFile01">
    7.     <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
    8.   </div>
    9. </div>
    11. <div class="input-group mb-3">
    12.   <div class="custom-file">
    13.     <input type="file" class="custom-file-input" id="inputGroupFile02">
    14.     <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
    15.   </div>
    16.   <div class="input-group-append">
    17.     <span class="input-group-text" id="">Upload</span>
    18.   </div>
    19. </div>
    21. <div class="input-group mb-3">
    22.   <div class="input-group-prepend">
    23.     <button class="btn btn-outline-secondary" type="button">Button</button>
    24.   </div>
    25.   <div class="custom-file">
    26.     <input type="file" class="custom-file-input" id="inputGroupFile03">
    27.     <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
    28.   </div>
    29. </div>
    31. <div class="input-group">
    32.   <div class="custom-file">
    33.     <input type="file" class="custom-file-input" id="inputGroupFile04">
    34.     <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
    35.   </div>
    36.   <div class="input-group-append">
    37.     <button class="btn btn-outline-secondary" type="button">Button</button>
    38. </div>

    无障碍浏览提示(易用性)

    如果您没有为每个input输入添加<label>，屏幕阅读器将对您的表单有困难。对于这些输入组，请确保向辅助技术传达任何附加的标签或功能。

    要使用的确切技术（<label>使用.sr-only类隐藏的元素，或使用 和aria-describedby属性结合aria-describedby使用）以及需要传达的其他信息将根据您正在实现的界面小部件的具体类型而有所不同。本节中的示例提供了一些建议的具体案例。