Bootstrap-表单控件大小和状态

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>