Bootstrap 4 输入框

您所在的位置:网站首页 html备注输入框 Bootstrap 4 输入框

Bootstrap 4 输入框

2024-01-27 18:56| 来源: 网络整理| 查看: 265

输入框

在文本框的两侧定义文本、按钮或按钮组,轻松扩展表单控件。

基本示例

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

@ @example.com https://example.com/users/ $ .00 With textarea @ @example.com Your vanity URL https://example.com/users/ $ .00 With textarea 包装

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

@ @ 规格尺寸定义

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

Small Default Large Small Default Large 勾选或单选框组合

在输入组的插件中放置任何复选框或单选七天,而不仅仅文本。

多个输入

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

First and last name First and last name 多类型控件组合

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

$ 0.00 $ 0.00 $ 0.00 $ 0.00 按钮组合 Button Button Button Button Button Button 带下拉列表的按钮组合 Action Another action Something else here Separated link Action Another action Something else here Separated link Dropdown Action Another action Something else here Separated link Dropdown Action Another action Something else here Separated link 分裂式按钮与input组合 Action Another action Something else here Separated link Action Another action Something else here Separated link Action Toggle Dropdown Action Another action Something else here Separated link Action Toggle Dropdown Action Another action Something else here Separated link 自定义表单

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

自定义选择 Options Choose... One Two Three Choose... One Two Three Options Button Choose... One Two Three Choose... One Two Three Button 自定义文件输入 Upload Upload Upload Choose file Choose file Upload Button Choose file Choose file Button 无障碍浏览提示(易用性)

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3