Bootstrap 表单
-
定义和使用
表单控件会通过 Bootstrap 自动接收一些全局样式:类 .form-control 的所有文本<input> ,<textarea> 和 <select> 元素的宽度均为100%。下面的示例创建具有两个输入字段,一个复选框和一个提交按钮的堆叠表单。在每个窗体控件周围添加一个带有 .form-group 的 wrapper 元素,以确保适当的边距:输出结果如下: -
内联表单
以内联形式,所有元素都是内联且左对齐。注意:这仅适用于视口内至少576px宽的表单;在小于576px的屏幕上,它将水平堆叠。内联表单的附加规则:将类 .form-inline 添加到 <form> 元素。下面的示例创建一个内联表单,其中包含两个输入字段,一个复选框和一个提交按钮:输出结果如下:上面的内联形式感觉“已压缩”,使用 Bootstrap 的间距实用程序会看起来更好。下面的示例在所有设备(小型和大型)上的每个输入上添加一个右边界 .mr-sm-2。 当输入字段中断时(由于没有足够的空间/宽度,从水平到垂直),使用空白边距类 .mb-2 设置样式:输出结果如下: -
-
表单校验
您可以使用不同的验证类向用户提供有价值的反馈。将 .was-validated 或 .needs-validation 添加到 <form> 元素,具体取决于您要在提交表单之前还是之后提供验证反馈;输入字段将具有绿色(有效)或红色(无效)边框,以指示表单中缺少的内容;您还可以添加 .valid-feedback 或 .invalid-feedback 消息,以明确告知用户缺少的内容或提交表单之前需要完成的操作。下面示例中,我们使用 .was-validated 来指示提交表单之前缺少的内容:输出结果如下:在下面示例中,我们使用 .needs-validation,它将在表单提交后(如果缺少任何内容)添加验证效果;请注意,您还必须添加一些jQuery代码,此示例才能正常工作: -