bootstrap_表单样式控制

单独的表单控件会自动被赋予一些全局样式,

内联表单样式为左对齐和inline-block级别的控件控制,可以将表单元素组排布的更紧凑;

在使用内联表单样式控制表单元素时,input/select/textarea元素的宽度被设置为100%;需要手动调整样式

在水平布局的表单中如需要将一行纯文本放置于label的同一行,为p标签加上form-control-static类即可,需要将p和label放在通过一个表单元素组内,然后使用栅栏进行调整,(比如在表单组内显示显示只读信息);

通过input-lg和input-sm来设置表单元素的最大高度和最小高度,通过col-xs-*来设置表单元素的宽度,最大不可操作12(栅栏格布局方式);

框架类;

form-group:表单元素组,一个提示和一个表单元素为一组,将input/textarea/select元素和这些元素的提示标签放进这个类的元素中能得到很好的排列;

form-control:表单元素的类,所有input/textarea/select设置了该类宽度都将默认为100%,并且具有简洁的默认样式;

btn-default:按钮置为直角边框;

btn:将按钮置为圆角边框;

checkbox:标记一个容器内为多选框元素;

form-inline:内联表单,所有表单元素组(form-group/checkbox)排列成一行;

sr-only:不占位隐藏元素;

radio:盒子内为单选元素,

form-horizontal:对表单控件水平布局,可使用栅栏对元素表单元素和提示元素进行控制,使用此类后,包含的form-group将变成占位12个的row,因此不再需要使用row即可使用栅栏格布局对表单元素进行控制;

checkbox:堆叠显示多选按钮;

radio:堆叠显示单选按钮;

checkbox-inline:水平排列多选框;

radio-inline:水平排列单选按钮;

表单信息验证回馈:

 has-success:表单元素边框变为绿色;

has-warning:表单元素边框变为泥黄色;

has-error:表单元素边框变为红色;

----------------------------------------------

input-lg:表单高度为最大尺寸;

input-sm:表单元素为最小尺寸;不定义为正常尺寸;

help-block:独占一行的提示文本,可以用来为表单元素显示回馈文本信息;


html 5元素属性:

placeholder:提示内容,如果表单元素为空的那么就会显示提示内容

for:当点击for属性的元素师,焦点会定位到id值等于for值的元素上,方便用户操作;

rows:设置文本域的初始化行数,每行行高根据默认值或设置的样式来定;


html5标签:

fieldset:批量管理包含的表单元素,为此标签添加disabled属性后可已禁用所有包含的表单元素;

label:input元素的定义说明,必须定义此标签,不然屏幕阅读器无法识别input元素;


求看官指点!

怎么感觉跟抄帮助文档木有区别呢?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值