【Bootstrap V4系列】学习入门教程之 组件-输入组（Input group）

输入组（Input group）

通过在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组，可以轻松扩展表单控件。

Basic example

在输入的两侧放置一个插件或按钮。您也可以在输入的两侧放置一个。记住将<label>s放在输入组之外。

<!--Basic example-->
<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>

页面展示效果：

一、Wrapping 包装

默认情况下，输入组通过flex-wrap:wrap 进行包装，以适应输入组内的自定义表单字段验证。您可以使用.flex-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>

页面展示效果：

二、Sizing 尺寸

将相对的表单大小类添加到.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>

页面展示效果：

三、Multiple inputs 多输入

虽然视觉上支持多个<input>，但验证样式仅适用于具有单个<input>的输入组。

四、Multiple addons 多个插件

支持多个附加组件，可以与复选框和单选框输入版本混合使用。

<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>

页面展示效果：

五、Button addons 按钮插件

<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>

页面展示效果：

六、Buttons with dropdowns 带下拉按钮

<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="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div role="separator" class="dropdown-divider"></div><a class="dropdown-item" href="#">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="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div role="separator" class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div></div>
</div>

页面展示效果：

七、Custom forms 自定义表单

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

7.1 Custom select 自定义选择

<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>

页面展示效果：

7.2 Custom file input 自定义文件输入

此示例使用自定义文件浏览器组件，该组件依赖于单独的 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>

页面展示效果：

自定义文件输入插件:

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>

您应该等待文档就绪事件，并调用init方法使您的自定义文件输入动态。我们公开了一个随处可用的全局变量：bsCustomFileInput

<script>$(document).ready(function () {bsCustomFileInput.init()})
</script>

一切准备就绪后，你应该看到页面的上传效果：