Bootstrap/docs/4.5/components/input-group

来自菜鸟教程
跳转至：导航、​搜索

在GitHub上查看

输入组

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

基本例子

在输入的两侧放置一个附加组件或按钮。 您也可以在输入的两侧放置一个。 切记放置 <label> 在输入组之外。

@
@example.com
https://example.com/users/
$
.00
With textarea 
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input aria-describedby="basic-addon1" aria-label="Username" class="form-control" placeholder="Username" type="text"/>
</div>
<div class="input-group mb-3">
<input aria-describedby="basic-addon2" aria-label="Recipient's username" class="form-control" placeholder="Recipient's username" type="text"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<label for="basic-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 aria-describedby="basic-addon3" class="form-control" id="basic-url" type="text"/>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input aria-label="Amount (to the nearest dollar)" class="form-control" type="text"/>
<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 aria-label="With textarea" class="form-control"></textarea>
</div>

包装纸

输入组默认通过以下方式包装 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 aria-describedby="addon-wrapping" aria-label="Username" class="form-control" placeholder="Username" type="text"/>
</div>

浆纱

将相对的表单大小分类添加到 .input-group 本身和其中的内容将自动调整大小-无需在每个元素上重复表单控件大小类。

不支持调整各个输入组元素的大小。

Small
Default
Large 
<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 aria-describedby="inputGroup-sizing-sm" aria-label="Sizing example input" class="form-control" type="text"/>
</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 aria-describedby="inputGroup-sizing-default" aria-label="Sizing example input" class="form-control" type="text"/>
</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 aria-describedby="inputGroup-sizing-lg" aria-label="Sizing example input" class="form-control" type="text"/>
</div>

复选框和收音机

将任何复选框或单选选项放在输入组的插件中,而不要输入文本。 

<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input aria-label="Checkbox for following text input" type="checkbox"/>
</div>
</div>
<input aria-label="Text input with checkbox" class="form-control" type="text"/>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input aria-label="Radio button for following text input" type="radio"/>
</div>
</div>
<input aria-label="Text input with radio button" class="form-control" type="text"/>
</div>

多个输入

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

First and last name 
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input aria-label="First name" class="form-control" type="text"/>
<input aria-label="Last name" class="form-control" type="text"/>
</div>

多个插件

支持多个加载项,并且可以与复选框和广播输入版本混合使用。

$ 0.00
$ 0.00 
<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 aria-label="Dollar amount (with dot and two decimal places)" class="form-control" type="text"/>
</div>
<div class="input-group">
<input aria-label="Dollar amount (with dot and two decimal places)" class="form-control" type="text"/>
<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" id="button-addon1" type="button"> 按键 </button>
</div>
<input aria-describedby="button-addon1" aria-label="Example text with button addon" class="form-control" placeholder="" type="text"/>
</div>
<div class="input-group mb-3">
<input aria-describedby="button-addon2" aria-label="Recipient's username" class="form-control" placeholder="Recipient's username" type="text"/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" id="button-addon2" type="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 class="btn btn-outline-secondary" type="button"> 按键 </button>
</div>
<input aria-describedby="button-addon3" aria-label="Example text with two button addons" class="form-control" placeholder="" type="text"/>
</div>
<div class="input-group">
<input aria-describedby="button-addon4" aria-label="Recipient's username with two button addons" class="form-control" placeholder="Recipient's username" type="text"/>
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary" type="button"> 按键 </button>
<button class="btn btn-outline-secondary" type="button"> 按键 </button>
</div>
</div>

带有下拉菜单的按钮

行动 另一个动作 这里还有其他 分隔链接
行动 另一个动作 这里还有其他 分隔链接 
<div class="input-group mb-3">
<div class="input-group-prepend">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" type="button"> 落下 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider" role="separator"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
<input aria-label="Text input with dropdown button" class="form-control" type="text"/>
</div>
<div class="input-group">
<input aria-label="Text input with dropdown button" class="form-control" type="text"/>
<div class="input-group-append">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" type="button"> 落下 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider" role="separator"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
</div>

分段按钮

行动 另一个动作 这里还有其他 分隔链接
行动 另一个动作 这里还有其他 分隔链接 
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button"> 行动 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider" role="separator"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
<input aria-label="Text input with segmented dropdown button" class="form-control" type="text"/>
</div>
<div class="input-group">
<input aria-label="Text input with segmented dropdown button" class="form-control" type="text"/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"> 行动 </button>
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider" role="separator"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</div>
</div>

自订表格

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

自定义选择

<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01"> 选项 </label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect02">
<option selected=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02"> 选项 </label>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button"> 按键 </button>
</div>
<select aria-label="Example select with button addon" class="custom-select" id="inputGroupSelect03">
<option selected=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
</div>
<div class="input-group">
<select aria-label="Example select with button addon" class="custom-select" id="inputGroupSelect04">
<option selected=""> 选择... </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> 三 </option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"> 按键 </button>
</div>
</div>

自定义文件输入

Upload
Upload 
<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 aria-describedby="inputGroupFileAddon01" class="custom-file-input" id="inputGroupFile01" type="file"/>
<label class="custom-file-label" for="inputGroupFile01"> 选择文件 </label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input class="custom-file-input" id="inputGroupFile02" type="file"/>
<label aria-describedby="inputGroupFileAddon02" class="custom-file-label" for="inputGroupFile02"> 选择文件 </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" id="inputGroupFileAddon03" type="button"> 按键 </button>
</div>
<div class="custom-file">
<input aria-describedby="inputGroupFileAddon03" class="custom-file-input" id="inputGroupFile03" type="file"/>
<label class="custom-file-label" for="inputGroupFile03"> 选择文件 </label>
</div>
</div>
<div class="input-group">
<div class="custom-file">
<input aria-describedby="inputGroupFileAddon04" class="custom-file-input" id="inputGroupFile04" type="file"/>
<label class="custom-file-label" for="inputGroupFile04"> 选择文件 </label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" id="inputGroupFileAddon04" type="button"> 按键 </button>
</div>
</div>

无障碍

确保所有表单控件都有适当的可访问名称,以便将其目的传达给辅助技术的用户。 实现此目的的最简单方法是使用 <label> 元素,或者（对于按钮而言）包含足够描述性的文字作为 <button>...</button> 内容。

对于无法包含可见图片的情况 <label> 或适当的文本内容,还有其他方法可以提供可访问的名称,例如：

  • <label> 使用隐藏的元素 .visually-hidden 类
  • 指向可以用作标签的现有元素 aria-labelledby
  • 提供一个 title 属性
  • 使用显式设置元素的可访问名称 aria-label

如果这些都不存在,辅助技术可能会诉诸于使用 placeholder 属性作为后备名称的后备 <input> and <textarea> 元素。 本节中的示例提供了一些建议的,针对特定案例的方法。

使用视觉隐藏的内容时（ .sr-only,aria-label , 乃至 placeholder 内容,一旦表单字段具有内容,该内容就会消失）,这将对辅助技术用户有利,缺少可见的标签文本对于某些用户可能仍然是个问题。 对于可访问性和可用性而言,某种形式的可见标签通常是最佳方法。

取自“https://cainiaojiaocheng.com/index.php?title=Bootstrap/docs/4.5/components/input-group&oldid=67”
Powered by MediaWiki