html %3cselect%3e 标签,bootstrap表单form

本文概述

在Bootstrap中，存在三种类型的表单布局：

垂直形式(默认)

水平形式

内联表格

自举表格规则

这3种表单布局有3条标准规则：

始终使用

(有助于提高使用屏幕阅读器的用户的可访问性)

在

中包装标签和表单控件(需要最佳间距)

将类.form-control添加到所有文本，和元素

1)引导程序垂直形式(默认)

Bootstrap example

Vertical Form Example

Email address

Password

Login

2)Bootstrap内联表格

在Bootstrap内联表单中，所有元素都是内联的，左对齐，并且标签在旁边。

此示例仅适用于视口内宽度至少为768px的表单！

例：

3)自举水平形式

如果要创建水平表单，则必须添加一些其他规则。

水平形式的其他规则：

将类.form-horizo​​ntal添加到

元素

将class .control-label添加到所有元素

例：

Bootstrap Example

Horizontal form Example

Email:

Password:

Submit

Bootstrap 4表格

在Bootstrap4中，表单控件会自动使用Bootstrap接收某些全局样式。

所有％20textual％20％3Cinput％3E，％20％3Ctextarea％3E，％20和％20％3Cselect％3E％20elements％20with％20class％20.form-control％20have％20a％20width％20of％20100％。

堆叠(全角)形式

引导程序4提供了全宽度的堆叠形式。

例：

让我们以创建带有两个输入字段，一个复选框和一个提交按钮的堆叠表单为例。

Bootstrap Example

Stacked form

Email:

Password:

Remember me

Submit