Bootstrap输入组允许用户在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组，可以轻松扩展窗体控件。例如在输入的任一侧放置一个附加组件或按钮。也可以在输入的两侧各放置一个。记住将label放在输入组之外。
一、基本示例
在输入的任一侧放置一个附加组件或按钮。也可以在输入的两侧各放置一个。记住将label放在输入组之外。
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">@example.com</span> </div> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> </div> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <div class="input-group-append"> <span class="input-group-text">.00</span> </div> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">With textarea</span> </div> <textarea class="form-control" aria-label="With textarea"></textarea> </div>
二、包装
默认情况下，输入组通过flex-wrap: wrap进行包装，以便在输入组中容纳自定义表单字段验证。可以使用nowrap禁用此功能。
<div class="input-group flex-nowrap"> <div class="input-group-prepend"> <span class="input-group-text" id="addon-wrapping">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"> </div>
三、大小
将相对窗体大小调整类添加到.input-group 。输入组本身和其中的内容将自动调整大小，无需在每个元素上重复窗体控件大小调整类。
注意：不支持对单个输入组元素进行大小调整。
<div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">Small</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Default</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div> <div class="input-group input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Large</span> </div> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"> </div>
四、复选框和单选按钮
将任何复选框或单选选项放在输入组的插件中，而不是文本中。
<div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> <input type="text" class="form-control" aria-label="Text input with checkbox"> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" aria-label="Radio button for following text input"> </div> </div> <input type="text" class="form-control" aria-label="Text input with radio button"> </div>
五、多输入框
虽然外观上支持多个input，但验证样式仅适用于具有单个input的输入组。
<div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">First and last name</span> </div> <input type="text" aria-label="First name" class="form-control"> <input type="text" aria-label="Last name" class="form-control"> </div>
六、多个附加组件
支持多个附加组件，可以与复选框和单选输入版本混合使用。
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)"> <div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> </div>
七、附加按钮
<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button> </div> <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend" id="button-addon3"> <button class="btn btn-outline-secondary" type="button">Button</button> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4"> <div class="input-group-append" id="button-addon4"> <button class="btn btn-outline-secondary" type="button">Button</button> <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div>
八、带下拉列表的按钮
<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a> </div> </div> </div>
九、分割按钮
<div class="input-group mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary">Action</button> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> <div class="input-group-append"> <button type="button" class="btn btn-outline-secondary">Action</button> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a> </div> </div> </div>
十、自定义表单
输入组包括对自定义选择和自定义文件输入的支持。不支持浏览器的默认版本。
1、自定义选择
<div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">Options</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="input-group mb-3"> <select class="custom-select" id="inputGroupSelect02"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <label class="input-group-text" for="inputGroupSelect02">Options</label> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="input-group"> <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> </div>
2、自定义文件输入
下面示例使用自定义文件浏览器组件，该组件依赖于单独的 bs-custom-file-input 插件。
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupFileAddon01">Upload</span> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01"> <label class="custom-file-label" for="inputGroupFile01">Choose file</label> </div> </div> <div class="input-group mb-3"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile02"> <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label> </div> <div class="input-group-append"> <span class="input-group-text" id="inputGroupFileAddon02">Upload</span> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03"> <label class="custom-file-label" for="inputGroupFile03">Choose file</label> </div> </div> <div class="input-group"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"> <label class="custom-file-label" for="inputGroupFile04">Choose file</label> </div> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button> </div> </div>
十一、可及性
确保所有表单控件都具有适当的辅助名称，以便将其用途传达给辅助技术的用户。实现此目的的最简单方法是使用元素，或者（对于按钮）将足够描述性的文本作为内容的一部分。例如：
<label><button>...</button></label>
对于无法包含可见或适当的文本内容的情况，还有其他方法仍可提供辅助名称，例如：
1、使用类隐藏的元素并添加 .sr-only类。
2、指向可用作标签的现有元素，使用 aria-labelledby属性。
3、提供属性 title。
4、使用 aria-label 属性。
如果这些都不存在，辅助技术可能会求助于使用该属性作为 on 和元素的辅助名称的回退。本节中的示例提供了一些建议的特定于案例的方法。
虽然使用视觉上隐藏的内容（如 <div>、<span> 甚至内容，一旦表单字段包含内容就会消失）将使辅助技术用户受益，但对于某些用户来说，缺少可见的标签文本可能仍然是个问题。某种形式的可见标签通常是可访问性和可用性的最佳方法。
