1、表单控件大小
可以通过设置控件height、line-height、padding和font-size等属性实现控件高度的设置。
bootstrap中对input、textarea和select控件使用两个类名来控制大小,但是都需要“form-control”维持基本样式:
input-sm:让控件比正常更小;
input-lg:让控件比正常更大。
源码:
.input-sm {height: 30px;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}
select.input-sm {height: 30px;line-height: 30px;}
textarea.input-sm,
select[multiple].input-sm {height: auto;}
.input-lg {height: 46px;padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}
select.input-lg {height: 46px;line-height: 46px;}
textarea.input-lg,
select[multiple].input-lg {height: auto;}
用法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框架的网格系统,类名添加在容器上
<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>
注:这里的form-group相当于网格系统中的row,如果没有“.form-group”,则需要用<div class="row"></div>代替<div class="form-group"></div>
2、表单控件的焦点状态(通过伪类“:focus”来实现)
源码:
.form-control:focus {border-color: #66afe9;outline: 0;
-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
用法:给控件input、textarea、select添加类名“form-control”;针对file、radio、checkbox在焦点下也做了一些处理
3、表单控件的禁用状态(给相应控件添加disabled)
源码:
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;}
用法1:有form-control存在时
<input class="form-control" type="text" placeholder="禁用" disabled />
用法2:无form-control存在时,不会出现不准输入的形状
用法3:若fieldset设置了disable属性,整个域都处于禁用状态
<form>
<fieldset disabled></fieldset>
</form>
用法4:处于禁用的整个域中,
若legend中有输入框,输入框是无法被禁用的(但是也会出现禁用图标)
<form>
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="我怎么没被禁用呢"></legend>
</fieldset>
</form>
4、表单控件的验证状态
bootstrap中提供了三种效果:
.has-warning:警告状态(黄色)
.has-error:错误状态(红色)
.has-success:成功状态(绿色)
用法1:直接在form-group容器上添加相应的状态类名(注:需要给label添加类名control-label可以让label标签里的内容同步变色)
<form>
<div class="form-group has-error">
<label class="control-label" for="email1">email地址</label>
<input type="email" class="form-control" id="email1" />
</div>
</form>
用法2:可以
让表单在相应状态下显示icon,只需在对应状态下添加类名“.has-feedback”
<form>
<div class="form-group has-error has-feedback">
<label class="control-label" for="email1">email地址</label>
<input type="email" class="form-control" id="email1" />
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
注:类名“.has-feedback”必须与has-warning等在一起;必须在表单中添加<span class="glyphicon glyphicon-remove form-control-feedback"></span>
用法3:提供不同的提示信息,使用了".help-block”样式,将显示信息以块状显示,且显示在控件底部
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
…
</form>
".help-block”样式源码:
.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}
用法4:在2.0版本提供和行内提示信息,使用类名“.help-inline”,让提示信息显示在控件同一水平显示
".help-inline”样式源码:
.help-inline{display:inline-block;padding-left:5px; color: #737373;}
若在3.0版本中有该需求,可以给样式中增加源码,或者利用网格布局
<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功状态</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
</div>
</div>
</form>