HTML 表单用于收集不同类型的用户输入。boostrap中表单有几种样式
- 基本垂直表单
- 内联表单 form-inline
- 水平排列表单 form-horizontal
单独的表单控件会被自动赋予一些全局样式。在输入框外面定义一个div标签,class属性设置.form-group
、
请选择本地文件上传.
显示效果
label 的 for 属性总结
- for属性规定 label 与哪个表单元素绑定。
label 和表单控件绑定方式有两种:
方法一:将表单控件作为label的内容,这种就是隐士绑定。
此时不需要for属性,绑定的控件也不需要id属性。
隐式绑定:
方法二:为label标签下的for属性命名一个目标表单的id,这种就是显示绑定。
显式绑定:内联表单 form-inline
为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
显示效果
只适用于窗口(viewport)至少在 768px 宽度时(窗口宽度再小的话就会使表单折叠)。
水平排列表单 form-horizontal通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。
这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
form-group 大小设置
form-group 可以设置3种大小样式
- form-group 默认大小输入框
- form-group-lg 大号输入框
- form-group-sm 小号输入框
在div这一层添加form-group-lg 或 form-group-sm属性
显示效果
参考资料:https://v3.bootcss.com/css/#forms



