.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); }
可以看出，要让控件在焦点状态下有上面样式效果，给控件添加类名“form-control”即可。
另外，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样，实现源码如下：
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; }
禁用状态
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。
实现源码如下：
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: not-allowed; background-color: #eee; opacity: 1; }
如果fieldset设置了disabled属性，整个域都将处于被禁用状态。不过如果legend中有输入框的话，这个输入框是无法被禁用的。
验证状态
在Bootstrap框架中提供这几种验证效果。
1. .has-warning:警告状态（黄色）
2. .has-error：错误状态（红色）
3. .has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
例如：
<div> <label for="inputError1">错误状态</label> <input type="text" placeholder="错误状态"> </div>
如果让表单在对应的状态下显示 对应的icon 出来，比如成功是一个对号√，错误是一个叉号×，那就要在对应的状态下添加类名“has-feedback”，此类名要与“has-error”、“has-warning”和“has-success”在一起，并且表单中要添加一个span元素。例如：
<form role="form"> <div> <label for="inputSuccess1">成功状态</label> <input type="text" placeholder="成功状态" > <span></span> </div> <div> <label for="inputWarning1">警告状态</label> <input type="text" placeholder="警告状态"> <span></span> </div> <div> <label for="inputError1">错误状态</label> <input type="text" placeholder="错误状态"> <span></span> </div> </form>
表单提示信息
使用一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。例如：
<div> <label for="inputSuccess1">成功状态</label> <input type="text" placeholder="成功状态" > <span>你输入的信息是正确的</span> <span></span> </div>
实现源码如下：
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
这个信息是显示在下面一行，如果想要显示在同一行内，可以使用类名“help-inline”，不过这个只有Bootstrap V2.x版本中有，Bootstrap V3.x版本中没有了，实现代码如下：
.help-inline{ display:inline-block; padding-left:5px; color: #737373; }
如果你不想为bootstrap.css增加自己的代码，但是又有这样的需求，那么只能借助于Bootstrap的网格系统。例如：
<div> <label for="inputSuccess1">成功状态</label> <div> <div> <input type="text" placeholder="成功状态" > </div> <span>你输入的信息是正确的</span> </div> </div>
按钮
基本按钮
使用类名“btn”，例如：<button type="button">基本按钮</button>
实现源码：
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
默认按钮
使用“.btn-default”。例如：<button type="button">默认按钮</button>
实现源码：
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
多标签支持
除了使用<button>标签元素来制作按钮，还可以在别的标签上添加类名“btn”来制作按钮。例如：