Bootstrap表单组件教程详解

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;
}

2、禁用状态：

在相应得表单控件上添加属性disabled即可，下面是css源码：

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
} 
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;
}

例子：

lt;input type="text" class="form-control" placeholder="表单已禁用" disabledgt;

如果fieldset设置了disabled属性，整个域都会处于被禁用状态

例子：

lt;form role="form"gt;
lt;fieldset disabledgt;
lt;div class="form-group"gt;
lt;labelgt; 输入框已禁用lt;/labelgt;
lt;input type="text" class="form-control" placeholder="禁止输入内容"gt;
lt;/divgt;
lt;div class="form-group"gt;
lt;labelgt;下拉框已禁用lt;/labelgt;
lt;select class="form-control"gt;
lt;optiongt;1lt;/optiongt;
lt;optiongt;2lt;/optiongt;
lt;optiongt;3lt;/optiongt;
lt;optiongt;4lt;/optiongt;
lt;/selectgt;
lt;/divgt;
lt;div class="checkbox"gt;
lt;label gt;
lt;input type="checkbox"gt;选项框被禁用了
lt;/labelgt;
lt;/divgt;
lt;button type="submit" class="btn btn-primary"gt;提交lt;/buttongt;
lt;/fieldsetgt;
lt;/formgt;

效果如下：（鼠标移上去的时候出现禁用的图标，这里是直接截的图看不到这个效果）

3、验证状态

bootstrap提供下面这几种效果：

1、.has-warning:警告状态 黄色

2、 .has-error :错误状态 红色

3、 .has-success:成功状态 绿色

使用的时候只需在form-group容器上对应添加状态类名，三种状态下效果都是一样的，只是颜色不一样而已

例子：

lt;formgt;
lt;div class="form-group has-success"gt;
lt;labelgt;成功状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="成功状态"gt;
lt;/divgt;
lt;div class="form-group has-error"gt;
lt;labelgt;错误状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="错误状态"gt;
lt;/divgt;
lt;div class="form-group has-warning"gt;
lt;labelgt;警告状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="警告状态"gt;
lt;/divgt;
lt;/formgt;

效果如下：

有时候，在表单验证的时不同的状态会提供不同的icon，如果要在对应的状态下显示icon出来，只需要在对应的状态下添加类名.has-feedback ,注意它要和.has-error,.has-success,.has-warning一起使用。

bootstrap的小图标都是使用@font-face来制作的。如：

lt;span class=”glyphicon glyphicon-warning form-control-feedback”gt;lt;/spangt;

例子：

lt;formgt;
lt;div class="form-group has-success has-feedback"gt;
lt;labelgt; 成功状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="成功状态"gt;
lt;span class="glyphicon glyphicon-ok form-control-feedback"gt;lt;/spangt;
lt;/divgt;
lt;div class="form-group has-error has-feedback"gt;
lt;labelgt;错误状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="错误状态"gt;
lt;span class="glyphicon glyphicon-remove form-control-feedback"gt;lt;/spangt;
lt;/divgt;
lt;div class="form-group has-warning has-feedback"gt;
lt;labelgt;警告状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="警告状态"gt;
lt;span class="glyphicon glyphicon-warning-sign form-control-feedback"gt;lt;/spangt;
lt;/divgt;
lt;/formgt;

效果如下：

表单提示信息

一般在制作表单验证时，需要提供不同的提示信息，在bootstrap框架中使用.help-block，将提示信息以块状显示，并且显示在控件底部

下面是css源码：

.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}

例子：

lt;formgt;
lt;div class="form-group has-success has-feedback"gt;
lt;labelgt;成功状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="成功状态"gt;
lt;span class="help-block"gt;输入的信息正确lt;/spangt;
lt;span class="glyphicon glyphicon-ok form-control-feedback"gt;lt;/spangt;
lt;/divgt;
lt;div class="form-group has-error has-feedback"gt;
lt;labelgt;错误状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="错误状态"gt;
lt;span class="help-block"gt;输入的信息有误lt;/spangt;
lt;span class="glyphicon glyphicon-remove form-control-feedback"gt;lt;/spangt;
lt;/divgt;
lt;div class="form-group has-warning has-feedback"gt;
lt;labelgt;警告状态lt;/labelgt;
lt;input type="text" class="form-control" placeholder="警告状态"gt;
lt;span class="help-block"gt;请输入正确的信息lt;/spangt;
lt;span class="glyphicon glyphicon-warning-sign form-control-feedback"gt;lt;/spangt;
lt;/divgt;
lt;/formgt;

效果如下：

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!