《Bootstrap如何改变表单控件大小和状态》要点:
本文介绍了Bootstrap如何改变表单控件大小和状态,希望对您有用。如果有疑问,可以联系我们。
1、表单控件大小
可以通过设置控件height、line-height、padding和font-size等属性实现控件高度的设置。
bootstrap中对input、textarea和select控件使用两个类名来控制大小,但是都需要“form-control”维持基本样式:
input-sm:让控件比正常更小;
input-lg:让控件比正常更大。
用法1:只对控件高度进行处理。
<input class=form-control input-lg type=text placeholder=添加.input-lg,控件变大> <input class=form-control type=text placeholder=正常大小> <input class=form-control input-sm type=text placeholder=添加.input-sm,控件变小>
用法2:若需对宽度也进行处理则借助bootstrap框架的网格系统,类名添加在容器上
<span style=color:#000000;><form class=form-horizontal> <div class=form-group> <div class=col-xs-4> <input class=form-control input-lg type=text placeholder=col-xs-4 > </div> <div class=col-xs-4> <input class=form-control type=text placeholder=col-xs-4 > </div> <div class=col-xs-4> <input class=form-control input-sm type=text placeholder=col-xs-4 > </div> </div> </form></span>
注:这里的form-group相当于网格系统中的row,如果没有“.form-group”,则需要用<div class=row></div>代替<div class=form-group></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。