第七个表单--下拉列表
对于标记了 multiple 属性的select控件来说,默认显示多选项。
第八个表单--静态控件
如果需要在表单中将一行纯文本和label元素放置于同一行,为p元素添加 .form-control-static 类即可。
email@example.com
第九个表单--禁用、只读状态、帮助语
为fieldset标签设置 disabled 属性,可以禁用 fieldset 中包含的所有控件(单选多选框、文本框、下拉框、button按钮),a标签做的按钮除外。
虽然 Bootstrap 会将这些样式应用到所有浏览器上,Internet Explorer 11 及以下浏览器中的 fieldset 元素并不完全支持 disabled 属性。因此建议在这些浏览器上通过 JavaScript 代码来禁用 fieldset。
第十个表单--校验状态
需要为label设置control-label样式,同步form-group状态,否则只是输入框或其他组件有颜色变换,label不会有
第十一个表单--添加额外的图标
反馈图标(feedback icon)
如果需要为input末尾添加一个反馈图标,第一步必须添加label标签,如果不需要说明可使用sr-only隐藏
第二步为外层的div添加has-feedback样式,为添加的图标提供定位
第三步在input后添加span标签class有三个样式要添加 第一个glyphicon后为后面做铺垫(必须) 第二个为glyphicon-ok(勾)、glyphicon-warning-sign(三角感叹号)、或者glyphicon-remove(叉叉) 第三个为form-control-feedback,为添加的图标进行绝对定位
第十二个表单--控件尺寸控制
通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。
高度控制
第十三个表单--控件尺寸控制2
为 .form-horizontal 包裹的表单组div添加form-group-lg 或 .form-group-sm 类来控制尺寸,且label需要添加control-label继承。
第十四个表单--表单的列尺寸
使用栅格系统.col-xs-*进行设置宽度
标签:表单 , bootstrap , 前端框架