用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。
概述
Bootstrap 的表单控件使用类扩展了我们的 Rebooted 表单样式。使用这些类来选择它们的自定义显示,以便在浏览器和设备之间实现更一致的呈现。
确保在所有输入(例如,电子邮件地址或数字信息)上使用适当的type
属性,以利用更新的输入控件,如电子邮件验证、号码选择等。email
number
这是一个演示 Bootstrap 表单样式的快速示例。继续阅读有关所需类、表单布局等的文档。
文本表单控件(如<input>
s、<select>
s 和<textarea>
s)使用类进行样式设置.form-control
。包括一般外观、焦点状态、大小等的样式。
请务必探索我们的自定义表单以进一步设计风格<select>
。
对于文件输入,交换.form-control
for .form-control-file
。
浆纱
.form-control-lg
使用和之类的类设置高度.form-control-sm
。
只读
在输入上添加readonly
布尔属性以防止修改输入的值。只读输入看起来更轻(就像禁用输入一样),但保留标准光标。
只读纯文本
如果您想将<input readonly>
表单中的元素设置为纯文本样式,请使用.form-control-plaintext
该类删除默认表单字段样式并保留正确的边距和填充。
使用 设置水平滚动范围输入.form-control-range
。
复选框和收音机
默认复选框和单选在改进HTML 元素的布局和行为的两种输入类型的单一类.form-check
的帮助下得到改进。复选框用于在列表中选择一个或多个选项,而单选框用于从多个选项中选择一个。
支持禁用的复选框和无线电。该disabled
属性将应用较浅的颜色来帮助指示输入的状态。
复选框和单选按钮支持基于 HTML 的表单验证并提供简洁易懂的标签。因此,我们<input>
的 s 和<label>
s 是兄弟元素,而不是 a <input>
within a <label>
。这稍微有点冗长,因为您必须指定id
和for
属性来关联<input>
和<label>
。
默认(堆叠)
默认情况下,任何数量的直接同级复选框和单选都将垂直堆叠并以.form-check
.
排队
通过添加.form-check-inline
任何.form-check
.
无标签
添加.position-static
到.form-check
其中没有任何标签文本的输入。请记住,仍然为辅助技术提供某种形式的可访问名称(例如, using aria-label
)。
布局
由于 Bootstrap 适用于我们几乎所有的表单控件,因此默认情况下,表单将垂直堆叠display: block
。width: 100%
可以使用其他类来根据每个表单更改此布局。
.form-group
类是向表单添加一些结构的最简单方法。它提供了一个灵活的类,鼓励对标签、控件、可选帮助文本和表单验证消息进行适当分组。默认情况下它只适用margin-bottom
,但它会.form-inline
根据需要选择其他样式。将它与<fieldset>
s、<div>
s 或几乎任何其他元素一起使用。
使用我们的网格类可以构建更复杂的表单。将这些用于需要多列、不同宽度和其他对齐选项的表单布局。
您也可以换成.row
标准.form-row
网格行的变体,它覆盖了默认的列间距,以获得更紧凑和更紧凑的布局。
还可以使用网格系统创建更复杂的布局。
.row
通过将类添加到表单组并使用.col-*-*
类来指定标签和控件的宽度,使用网格创建水平表单。确保也添加.col-form-label
到您<label>
的 s 中,以便它们与其关联的表单控件垂直居中。
有时,您可能需要使用边距或填充实用程序来创建所需的完美对齐。例如,我们删除padding-top
了堆叠单选输入标签上的 ,以更好地对齐文本基线。
请务必使用.col-form-label-sm
or来正确遵循.col-form-label-lg
您<label>
的 s 或s的大小。<legend>
.form-control-lg
.form-control-sm
列大小
如前面的示例所示,我们的网格系统允许您在 a或中放置任意数量的.col
s 。他们将在它们之间平均分配可用宽度。您还可以选择列的子集以占用更多或更少的空间,而其余的 s 将其余部分平均分配,具有特定的列类,例如..row
.form-row
.col
.col-7
自动调整大小
下面的示例使用 flexbox 实用程序将内容和更改垂直居中.col
,以便.col-auto
您的列只占用所需的空间。换句话说,列大小本身基于内容。
然后,您可以再次将其与特定于大小的列类重新混合。
当然也支持自定义表单控件。
使用.form-inline
该类在单个水平行上显示一系列标签、表单控件和按钮。内联表单中的表单控件与其默认状态略有不同。
- 控件是
display: flex
,折叠任何 HTML 空白,并允许您使用间距和flexbox实用程序提供对齐控制。
- 控件和输入组接收
width: auto
以覆盖 Bootstrap 默认值width: 100%
。
- 控件仅在至少 576 像素宽的视口中内嵌显示,以解决移动设备上的窄视口。
您可能需要使用间距实用程序手动处理各个表单控件的宽度和对齐方式(如下所示)。最后,确保始终<label>
在每个表单控件中包含一个,即使您需要使用.sr-only
.
还支持自定义表单控件和选择。
隐藏标签的替代品
如果您没有为每个输入添加标签,那么屏幕阅读器等辅助技术将无法处理您的表单。对于这些内联表单,您可以使用.sr-only
类隐藏标签。还有其他替代方法可以为辅助技术提供标签,例如aria-label
、aria-labelledby
或title
属性。如果这些都不存在,辅助技术可能会求助于使用该placeholder
属性(如果存在),但请注意,placeholder
不建议将其用作其他标记方法的替代品。
帮助文本
.form-text
可以使用(以前称为.help-block
v3)创建表单中的块级帮助文本。内联帮助文本可以使用任何内联 HTML 元素和实用程序类(如.text-muted
.
将帮助文本与表单控件相关联
帮助文本应与使用该aria-describedby
属性相关的表单控件显式关联。这将确保辅助技术(例如屏幕阅读器)会在用户聚焦或进入控件时宣布此帮助文本。
输入下方的帮助文本可以使用.form-text
. 此类包括display: block
并添加了一些顶部边距,以便与上面的输入保持间距。
您的密码长度必须为 8-20 个字符,包含字母和数字,并且不得包含空格、特殊字符或表情符号。
内联文本可以使用任何典型的内联 HTML 元素(可以是<small>
、<span>
或其他东西),只不过是一个实用程序类。
在输入上添加disabled
布尔属性以防止用户交互并使其看起来更轻。
将disabled
属性添加到 a<fieldset>
以禁用其中的所有控件。
锚点警告
浏览器将 a 内的所有原生表单控件(<input>
、<select>
和<button>
元素)<fieldset disabled>
视为已禁用,从而阻止了键盘和鼠标在它们上的交互。
但是,如果您的表单还包含自定义的类似按钮的元素,例如<a ... class="btn btn-*">
,则这些元素只会被赋予pointer-events: none
. 正如关于按钮禁用状态的部分(特别是锚元素的子部分)中所述,此 CSS 属性尚未标准化,并且在 Internet Explorer 10 中不完全支持。基于锚的控件也将仍然是可使用键盘进行对焦和操作。您必须通过添加手动修改这些控件,tabindex="-1"
以防止它们接收焦点并将aria-disabled="disabled"
它们的状态发送给辅助技术。
跨浏览器兼容性
disabled
虽然 Bootstrap将在所有浏览器中应用这些样式,但 Internet Explorer 11 及更低版本并不完全支持<fieldset>
. 使用自定义 JavaScript 禁用这些浏览器中的字段集。
验证
通过 HTML5 表单验证向您的用户提供有价值的、可操作的反馈 -在我们所有支持的浏览器中都可用。从浏览器默认验证反馈中进行选择,或使用我们的内置类和启动器 JavaScript 实现自定义消息。
我们知道目前无法访问客户端自定义验证样式和工具提示,因为它们没有暴露于辅助技术。在我们研究解决方案时,我们建议使用服务器端选项或默认浏览器验证方法。
不幸的是,输入组在验证样式方面存在困难。我们的建议是将反馈消息作为.input-group
that has的兄弟元素.is-{valid|invalid}
。在输入组中放置反馈消息会破坏border-radius
. 请参阅此解决方法。
这个怎么运作
下面是表单验证如何与 Bootstrap 一起工作:
- HTML 表单验证通过 CSS 的两个伪类
:invalid
和:valid
. 它适用于<input>
、<select>
和<textarea>
元素。
- Bootstrap 将
:invalid
和:valid
样式限定为父.was-validated
类,通常应用于<form>
. 否则,任何没有值的必填字段在页面加载时显示为无效。这样,您可以选择何时激活它们(通常在尝试提交表单之后)。
- 要重置表单的外观(例如,在使用 AJAX 进行动态表单提交的情况下),请在提交后再次删除
.was-validated
该类。<form>
- 作为后备,可以使用类
.is-invalid
而.is-valid
不是伪类来进行服务器端验证。它们不需要.was-validated
父类。
- 由于 CSS 工作方式的限制,我们不能(目前)
<label>
在没有自定义 JavaScript 帮助的情况下将样式应用于 DOM 中表单控件之前的样式。
- 所有现代浏览器都支持约束验证 API,这是一系列用于验证表单控件的 JavaScript 方法。
- 反馈消息可以使用浏览器默认设置(每个浏览器都不同,并且无法通过 CSS 设置样式)或我们的自定义反馈样式以及额外的 HTML 和 CSS。
setCustomValidity
您可以在 JavaScript 中提供自定义有效性消息。
考虑到这一点,请考虑以下演示,了解我们的自定义表单验证样式、可选的服务器端类和浏览器默认设置。
自定义样式
对于自定义 Bootstrap 表单验证消息,您需要将novalidate
布尔属性添加到您的<form>
. 这将禁用浏览器默认反馈工具提示,但仍提供对 JavaScript 中表单验证 API 的访问。尝试提交以下表格;我们的 JavaScript 将拦截提交按钮并将反馈转发给您。尝试提交时,您会看到应用于表单控件的:invalid
和样式。:valid
自定义反馈样式应用自定义颜色、边框、焦点样式和背景图标以更好地传达反馈。s 的背景图标<select>
仅适用于.custom-select
,而不适用于.form-control
。
浏览器默认值
对自定义验证反馈消息或编写 JavaScript 来更改表单行为不感兴趣?一切都好,您可以使用浏览器默认设置。尝试提交下面的表格。根据您的浏览器和操作系统,您会看到略有不同的反馈风格。
虽然这些反馈样式无法使用 CSS 设置样式,但您仍然可以通过 JavaScript 自定义反馈文本。
服务器端
我们建议使用客户端验证,但如果您需要服务器端验证,您可以使用.is-invalid
和指示无效和有效的表单字段.is-valid
。请注意,.invalid-feedback
这些类也支持。
对于无效字段,请确保无效的反馈/错误消息使用 与相关的表单字段相关联aria-describedby
。此属性允许id
引用多个,以防字段已指向其他表单文本。
支持的元素
验证样式可用于以下表单控件和组件:
<input>
s 和<textarea>
s 与.form-control
<select>
s.form-control
或.custom-select
.form-check
s
.custom-checkbox
s 和.custom-radio
s
.custom-file
如果您的表单布局允许,您可以将类交换.{valid|invalid}-feedback
为.{valid|invalid}-tooltip
类以在样式工具提示中显示验证反馈。确保有一个父position: relative
级用于工具提示定位。在下面的示例中,我们的列类已经具有此功能,但您的项目可能需要其他设置。
定制
验证状态可以通过 Sass 与$form-validation-states
地图进行自定义。位于我们的_variables.scss
文件中,这个 Sass 映射被循环生成默认valid
/invalid
验证状态。包括用于自定义每个州的颜色和图标的嵌套地图。虽然浏览器不支持其他状态,但使用自定义样式的用户可以轻松添加更复杂的表单反馈。
请注意,我们不建议在不修改form-validation-state
mixin 的情况下自定义这些值。
由于选择器的限制,我们无法border-radius
通过验证解决输入组的损坏问题,因此需要手动覆盖。当您使用标准输入组并且不自定义默认边框半径值时,请添加.rounded-right
到带有损坏的元素border-radius
。
当您使用小型或大型输入组或自定义默认border-radius
值时,请将自定义 CSS 添加到带有 busted 的元素border-radius
。
要获得更多自定义和跨浏览器一致性,请使用我们完全自定义的表单元素来替换浏览器默认值。它们建立在语义和可访问标记之上,因此它们是任何默认表单控件的可靠替代品。
复选框和收音机
每个复选框和单选框<input>
以及<label>
配对都包含在 a<div>
中以创建我们的自定义控件。从结构上讲,这与我们的默认方法相同.form-check
。
我们对所有状态使用同级选择器 ( ~
) 来正确设置自定义表单指示器的样式。当与类结合时,我们还可以根据的状态为每个项目设置文本样式。<input>
:checked
.custom-control-label
<input>
我们使用 隐藏默认值<input>
,opacity
并使用 和来.custom-control-label
构建一个新的自定义表单指示器。不幸的是,我们不能仅从 构建自定义元素,因为 CSS不适用于该元素。::before
::after
<input>
content
在选中状态下,我们使用来自Open Iconic的base64 嵌入式 SVG 图标。这为我们提供了跨浏览器和设备的样式和定位的最佳控制。
复选框
自定义复选框也可以利用:indeterminate
伪类(没有可用的 HTML 属性来指定它)。
如果您使用的是 jQuery,那么这样的内容就足够了:
收音机
排队
已禁用
自定义复选框和收音机也可以禁用。将disabled
布尔属性添加到 中<input>
,自定义指标和标签描述将自动设置样式。
开关
开关具有自定义复选框的标记,但使用.custom-switch
该类来呈现切换开关。开关也支持该disabled
属性。
自定义<select>
菜单只需要一个自定义类,.custom-select
即可触发自定义样式。自定义样式仅限于s 的初始外观,并且由于浏览器限制<select>
无法修改s。<option>
您还可以从小型和大型自定义选择中进行选择,以匹配我们类似大小的文本输入。
multiple
还支持该属性:
作为size
属性:
范围
<input type="range">
使用.创建自定义控件.custom-range
。轨道(背景)和拇指(值)的样式都在浏览器中显示相同。由于只有 IE 和 Firefox 支持从拇指的左侧或右侧“填充”其轨迹以直观地指示进度,因此我们目前不支持它。
min
范围输入分别具有和max
—0
和的隐含值100
。min
您可以为使用和max
属性的那些指定新值。
默认情况下,范围输入“捕捉”到整数值。要更改此设置,您可以指定一个step
值。在下面的示例中,我们使用step="0.5"
.
文件浏览器
文件输入是最复杂的,如果您想将它们与功能选择文件...和选定的文件名文本挂钩,则需要额外的 JavaScript。
<input>
我们通过隐藏默认文件opacity
,而是设置<label>
. 生成按钮并使用 定位::after
。最后,我们声明一个width
andheight
以<input>
保证周围内容的适当间距。
使用 SCSS 翻译或自定义字符串
:lang()
伪类用于允许将“浏览”文本翻译成其他语言。$custom-file-text
使用相关的语言标签和本地化字符串覆盖或添加条目到Sass 变量。英文字符串可以用同样的方式定制。例如,以下是添加西班牙语翻译的方法(西班牙语的语言代码是es
):
以下是lang(es)
针对西班牙语翻译的自定义文件输入的实际操作:
您需要正确设置文档(或其子树)的语言才能显示正确的文本。这可以使用元素上的lang
属性或HTTP 标头以及其他方法来完成。<html>
Content-Language
使用 HTML 翻译或自定义字符串
Bootstrap 还提供了一种方法来翻译 HTML 中的“浏览”文本,其data-browse
属性可以添加到自定义输入标签(荷兰语示例):