控件状态

　　每个控件(尤其是input)在使用的过程中，可能都会有很多状态，比如输入内容的时候，有焦点状态提示；输错的时候有出错提示等。Bootstrap提供了3种状态的样式可供使用，分别是：焦点状态、禁用状态、验证提示状态。

 1.焦点状态

 　　焦点状态的实现方式是在选择器:focus上删除默认的outline样式，重新应用一个新的box-shadow样式，从而实现焦点状态下，input出现柔和的阴影边框（注意，该效果必须使用.form-control样式才行）。

 

.form-control:focus {
  border-color: #66afe9;        
  /* 作用域得到焦点时的边框颜色*/
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

　　radio和checkbox的焦点效果和普通input的不太一样。Bootstrap对file、radio、checkbox的焦点效果做了一些特殊处理，以便更圆形化。

// 源码1675行
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;
}

2.禁用状态

 　　禁用状态的实现方式主要是完善默认disabled状态的显示状态，使用方式和普通的disabled一样，只需要在禁用元素上使用disabled属性即可。

<input type="text" placeholder="Disabled input here..." disabled>

　　其源码主要是设置了不准输入的鼠标样式和背景颜色（灰色）。注意，只有带.form-control样式的控件才会更改背景色。

// 源码1725行
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  /* 若form-control控件或fieldset元素被禁用，显示不允许输入手形图标*/
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

　　而如果不使用上述样式.form-control，直接在普通的元素上使用disabled属性，则只会显示一个不能输入的手型图标。

// 源码1780行
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}

　　从上述源码可以看出，fieldset如果使用了disabled属性，则fieldset内部的input、select、textarea或应用了.form-control样式的其他控件也将为禁用状态。

<fieldset disabled>
     <legend><input></legend>
     <input type="text" placeholder="Disabled input">
     <select>
        <option>不可选择</option>
     </select>
     <div class="checkbox">
        <label><input type="checkbox">记住密码</label>
     </div>
     <button type="submit" class="btn btn-primary">提交</button>
</fieldset>

　　上面的示例运行后，legend内的input却没有被禁用，依然可以输入文本，这是因为HTML5限制fieldset内的第一个legend元素不受disabled的影响。

　　由于IE不支持fieldset下的disabled属性(比如IE10不支持input和button)，所以IE下的开发者需要用JavaScript代码进行特殊处理。另外，fieldset上应用disabled时，fieldset内部的a标签在所有浏览器下的单击行为都不能被禁止(比如：<a class="btn btn-default">)，需要使用JavaScript代码再进行特殊处理。

 3.验证提示状态

 　　在填写表单的时候，经常要提示用户其输入内容是否合法，长度是否够用，再次输入的密码是否和第一次输入的密码一致，或者输入的用户名存在还是不存在等问题，不同的提示可能需要不同的提示状态(如，颜色、边框、提示语等)。Bootstrap提供了.has-warning、.has-error、.has-success三种样式用于分别表示警告(黄色)、错误(红色)、成功(绿色)语境的内容。

    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning">输入长度不够！</label>
        <input type="text" class="form-control" id="Text1">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError">输入不符合要求！</label>
        <input type="text" class="form-control" id="Text2">
    </div>
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess">输入文本符合要求！</label>
        <input type="text" class="form-control" id="Text3">
    </div>

　　has-error和has-success的实现方式相同，只是对文字、边框和阴影设置颜色不同。has-warning的源码如下：

// 源码1866行
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline { /* has-warning容器内部的控件文本颜色统一设置*/
  color: #8a6d3b;       /* 不使用control-label,使用其他的(如help-block)也可以*/
}
.has-warning .form-control {
  /* 为has-warning容器内部的form-control控件设置边框和阴影效果*/
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-warning .form-control:focus {
  /* has-warning容器内部的控件在得到焦点时的效果颜色更深*/
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {/* addon的背景色和字体颜色也要同步设置*/
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}

 　　有时候，我们在验证状态的时候提供所对应的状态的小图标，以便能够直观地显示。

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2" />
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

　　该效果运用了两个样式：父容器上的has-feedback样式用于设置定位方式；小图标元素上的form-control-feedback样式用于设置图标的显示大小等。

// 源码1824行
.has-feedback {  position: relative;    /* 相对定位,用于设置input元素的父容器的定位方式*/
}
.has-feedback .form-control {  padding-right: 42.5px;/* 右内边距的设置,以便可以显示小图标*/ 
}
.has-feedback .form-control-feedback {  /* 设置小图标的显示方式*/
  position: absolute;/* 绝对定位*/
  top: 25px;
  right: 0; /* 右对齐*/
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
}
.has-success .form-control-feedback {  color: #3c763d; /* 验证通过时图标的显示颜色 */
}
.has-warning .form-control-feedback {  color: #8a6d3b; /* 验证警告时图标的显示颜色 */
}
.has-error .form-control-feedback {  color: #a94442; /* 验证错误时图标的显示颜色 */
}