java中的接口是类吗
242
2023-06-03
BootStrap注意事项小结（五）表单
BootStrap注意事项小结（五）表单
1.基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 、
这里是块级帮助文本的实例。
请打勾
不要将表单组合输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
2.内联表单
为
可能需要手动设置宽度
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholdehttp://r 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
3.水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
请记住我
4.被支持的控件1
表单布局实例中展示了其所支持的标准表单控件。
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。
必须添加类型声明
只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
输入控件组
如需在文本输入域 前面或后面添加文本内容或按钮控件，请参考输入控件组。
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
5.被支持的控件2
多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的
Option one is this and that—be sure to include why it's great
Option two is disabled
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
Option three is disabled
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
1
2
3
1
2
3
NTJxjnJA
下拉列表（select）
...
6.静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为
元素添加 .form-control-static 类即可。
email@example.com
7.焦点状态
我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予box-shadow 属性。
演示:focus 状态
在本文档中，我们为上面实例中的输入框赋予了自定义的样式，用于演示 .form-control 元素的 :focus 状态。
8.禁用状态
为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。
被禁用的 fieldset
为
默认情况下，浏览器会将
跨浏览器兼容性
虽然 Bootstrap 会将这些样式应用到所有浏览器上，Internet Explorer 11 及以下浏览器中的
9.只读状态
为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
10.校验状态
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
将验证状态传达给辅助设备和盲人用户
使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。
为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。例如，你可以在表单控件的
Checkbox with success
Checkbox with warning
Checkbox with error
11.添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标（feedback icon）只能使用在文本输入框 元素上。
图标、label 和输入控件组
对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将label 标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。
向辅助技术设备传递图标的含义
为了确保辅助技术- 如屏幕阅读器 - 正确传达一个图标的含义，额外的隐藏的文本应包含在 .sr-only 类中，并明确关联使用了 aria-describedby 的表单控件。或者，以某些其他形式（例如，文本输入字段有一个特定的警告信息）传达含义，例如改变与表单控件实际相关联的
虽然下面的例子已经提到各自表单控件本身的
(success)
(warning)
(error)
@
(success)
12.控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
水平排列的表单组的尺寸
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal包裹的 label 元素和表单控件快速设置尺寸。
调整列（column）尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
13.辅助文本
针对表单控件的“块（block）”级辅助文本。
与表单控件相关联的帮助文本
与表单控件相关联的帮助文本 aria-describedby 属性的表单控件关联，这将确保使用辅助技术- 如屏幕阅读器 - 的用户获取控件焦点或进入控制时显示这个帮助文本。
一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。
...
一块帮助文本，突破到一个新的线，可以超越一行。
以上所述是给大家介绍的BootStrap注意事项小结（五）表单，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~