开发者学堂课程【前端开发框架 Bootstrap 使用教程:13-Bootstrap 全局 css 样式---表单2】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/360/detail/4232
13-Bootstrap 全局 css 样式---表单2
目录
一、水平排列的表单
二、被支持的控件
1.输入框
2.文本域
3.多选和单选框
4.下拉列表(select)
三、静态控件
一、水平排列的表单
通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类可将 Jabel 标签和控件组水平并排布局。
这样做将改变.forim-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加.row 了。
此时的输入框是占满全屏的,宽度为百分之百。当我们使用栅格系统进行控制,更改 label 中类名的与 div 的类即可。
所以通过栅格系统进行控制是十分方便的
二、被支持的控件
表单布局实例中展示了其所支持的标准表单控件。
1.输入框
包括大部分表单控件、文本输入域控件,还支持所有 HTML5类型的输入短件
text、password、datetime、datetime
local、date、month、timeweek、numberniemaidii, ur l uli seanbh tel 和 color。
必须添加类型声明 只有正确设置了 type 属性的输入控件才能被赋予正确的样式 |
输入控件组 如需在文本输入域<input>前面或后面添加文本内容或按钮控件,请参考输入控件组。 |
2.文本域
支持多行文本的表单控件,可根据需要改变 rows 属性
3.多选和单选框
多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的<1abel>标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将.disabled 类赋予radio、.rad1o.line checkbox. checkbos.inline 或<fieldiet>
默认外观(堆叠在一起)
4.下拉列表(select)
注要,很多原生选降某单-即在 Satan 和 Chione 中的国角是无去通过样改 bondar.nodtus 属性来改变的
对于标记了 multiple 属性的<select>控件来说,默认显示多选项
三、静态控件
如果需要在表单中将一行纯文本文字和 label 元素放置于同一行,为<p>元素添加 .form-control-static 即可。