Bootstrap表单组件教程详解

在bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为bootstrap框架都是通过input[type=”#63;”]的形式来定义样式的，如：text类型，对应得是input[type=”text”]

为了让控件在各种表单风格中样式不错，需要添加类名.form-control

lt;form role="form"gt;
lt;div class="form-group"gt;
lt;input type="email" class="form-control" placeholder="enter email" gt;
lt;/divgt;
lt;/formgt; 

下拉选择框select

多行选择设置multiple属性的值为multiple

lt;form role="form"gt;
lt;div class="form-group"gt;
lt;select class="form-control"gt;
lt;optiongt;1lt;/optiongt;
lt;optiongt;2lt;/optiongt;
lt;optiongt;3lt;/optiongt;
lt;optiongt;4lt;/optiongt;
lt;optiongt;5lt;/optiongt;
lt;/selectgt;
lt;/divgt;
lt;div class="form-group"gt;
lt;select multiple class="form-control"gt;
lt;optiongt;1lt;/optiongt;
lt;optiongt;2lt;/optiongt;
lt;optiongt;3lt;/optiongt;
lt;optiongt;4lt;/optiongt;
lt;optiongt;5lt;/optiongt;
lt;/selectgt;
lt;/divgt;
lt;/formgt; 

文本域textarea

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以定义其宽度，如果textarea元素中添加了类名.form-control,则无需设置cols属性，因为bootstrap框架中.form-control样式的标的空间宽度为100%或auto

lt;form role="form"gt;
lt;div class="form-group"gt;
lt;textarea class="form-control" rows="3"gt;lt;/textareagt;
lt;/divgt;
lt;/formgt; 

复选框checkbox和单选框radio

checkbox和radio与label标签配合使用会出现一些小问题（如对齐问题）

lt;formgt;
lt;div class="checkbox"gt;
lt;labelgt;
lt;input type="checkbox"gt; 记住密码
lt;/labelgt;
lt;/divgt;
lt;div class="radio"gt;
lt;labelgt;
lt;input type="radio" name="optionsRadios" id="optionsRadios1" checkedgt; 喜欢
lt;/labelgt;
lt;/divgt;
lt;div class="radio"gt;
lt;labelgt;
lt;input type="radio" name="optionsRadios" id="optionsRadios2"gt;不喜欢
lt;/labelgt;
lt;/divgt;
lt;/formgt;

1、不管是checkbox还是radio都使用label包起来了

2、checkbox连同label标签放在一个名为.checkbox的容器内

3、radio连同label标签放在一个名为.radio的容器内,bootstrap主要借助.checkbox和.radio样式来处理复选框、单选按钮与标签的对齐方式

.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}

复选框和单选按钮水平排列

1、如果checkbox需要水平排列，只需要在label标签上添加类名.checkbox-inline

2、如果radio需要水平排列，只需在label标签上添加类名.radion-inline

下面是css源码：

.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
} 
lt;div class="form-group"gt;
lt;label class="radio-inline"gt;
lt;input type="radio" name="sex"value="option1"gt; 男性
lt;/labelgt;
lt;label class="radio-inline"gt;
lt;input type="radio" name="sex" value="option2"gt; 女性
lt;/labelgt;
lt;label class="radio-inline"gt;
lt;input type="radio" name="sex" value="option3"gt;中性
lt;/labelgt;
lt;/divgt;

表单控件状态

1、焦点状态：

焦点状态是通过伪类：focus来实现的，bootstrap表单控件中的焦点状态删除了outline的默认样式，重新添加阴影效果，下面是

css源码：

.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

lt;form class="form-horizontal"gt;
lt;div class="form-group "gt;
lt;div class="col-xs-6"gt;
lt;input type="text" class=" input-lg" placeholder="不是在焦点状态下的效果"gt;
lt;/divgt;
lt;div class="col-xs-6"gt;
lt;input type="text" class="form-control input-lg" placeholder="在焦点状态下的效果"gt;
lt;/divgt;
lt;/divgt;
lt;/formgt;

（编辑：PHP编程网 - 黄冈站长网）

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