Bootstrap 表单

Bootstrap 将表单内的fieldset、legend、label标签的margin、padding、border等进行了细化设置，其他没啥。

注意：

1、form-contro样式使input、select、textarea样式显示宽度为100%，placeholder的颜色为#999999

2、form-group样式提供了一个margin-bott：15px的底部外边距，用于使每组控件清晰分组，典型用法：

<div class=“form-group”>
<span style="white-space:pre">	</span><label>登录账户</label>
<span style="white-space:pre">	</span><input type=“email” class=“form-control” placeholder=”请输入你的用户名或Email”>
</div>
<div class=“form-group”>
<span style="white-space:pre">	</span><label>密码</label>
<span style="white-space:pre">	</span><input type=“text” class=“form-control” placeholder=”请输入你的密码”>
</div>

3、checkbox和radio是input元素里两个非常特殊的type，通常在使用的过程中和label文字搭配，但通常会出现左右边距对不齐的问题。为此，Bootstrap进行了标准设置，开发人员在使用的过程中遵循如下方式即可：（即使用的时候，每个input外部都要用label包住，并且在最外层用容器元素包住）

<div class=“checkbox”>
<label><input type=“checkbox” value=””>是否想赚大钱？</label>
</div>
<div class=“radio”>
<label><input type=“radio” name=“optionsRadios” value=“female” checked>请确保,您喜欢女人？</label>
</div>
<div class=“radio”>
<label><input type=“radio” name=“optionsRadios” value=“male”>请确保,您喜欢男人？</label>
</div>

另外，有些checkbox或者radio元素中文本很少，可能需要横向显示，为此Bootstrap也提供了相应的内联样式.checkbox-inline和.radio-inline。示例图片：

二、内联表单

给form标签加一个form-inline样式，该样式只在大于769像素的浏览器上才能应用，注意，如果如上面代码那样设置了label，input会换行的，在给label加一个div标签即可解决问题：

<div class="form-group">
	<label>登录账户</label>
</div>
<div class="form-group">
	<input type="email" class="form-control" placeholder="请输入你的用户名或Email">
</div>
<div class="form-group">
	<label>密码</label>
</div>
<div class="form-group">
	<input type="text" class="form-control" placeholder="请输入你的密码">
</div>

得到的内联效果如下：

三、横向表单

首先在form标签上加一个form-hori样式（设置相关padding和mar），然后，使用Bootstrap栅格系统，以便让labe和input水平并列布局。由于.form-horizontal样式改变了.form-group的行为，所以此处无需row样式，示例代码：

<form class="form-horizontal">
	<fieldset>
		<legend>用户登录</legend>
		<div class="form-group">
			<label for="account" class="col-md-2 control-label">登录账户</label>
			<div class="col-md-10">
				<input type="email" class="form-control" id="account"placeholder="请输入你的用户名或Email">
			</div>
		</div>
		<div class="form-group">
			<label for="password" class="col-md-2 control-label">密码</label>
			<div class="col-md-10">
				<input type="text" class="form-control" id="password" placeholder="请输入你的密码">
			</div>
		</div>
		<div class="checkbox">
			<label><input type="checkbox">记住密码</label>
		</div>
		<button type="submit" class="btn btn-default">登录</button>
	</fieldset>
</form>

得到的图示结果：

四、验证提示状态

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>

五、表单控件大小

设置稍大或稍小的input，可以给它加一个 input-lg 或input-sm样式，如：

<input class=“input-lg form-control” type=“text” placeholder=”较大”>
<input class=“form-control” type=“text” placeholder=”正常大小”>
<input class=“input-sm form-control” type=“text” placeholder=”较小”>

控件大小的实现思路是给input输入框设定不同大小的padding、fontsize、border-radius值。从如下源码也可以看出，.input-lg和.input-sm样式不仅适用于input，也适用于select和textarea元素。

相应的css源码：

.input-sm { /* 设置小的输入框input*/
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
} select.input-sm {/* 设置小的选择框select*/
height: 30px;
line-height: 30px;
} textarea.input-sm,
select[multiple].input-sm { /* 设置小的文本框textarea*/
height: auto;
} .
input-lg {
/* 设置大的输入框input*/
height: 46px; padding: 10px 16px; font-size: 18px; lineheight:
1.33;
border-radius: 6px;
} select.input-lg {
height: 46px; line-height: 46px; /* 设置大的选择框select*/}
textarea.input-lg,select[multiple].input-lg { height: auto; /* 设置大的文本框textarea*/}

六、Bootstrap还提供了一个help-block样式，用于在表单中显示块级的帮助提示，使用方式为：

<span class=”help-block">自己独占一行或多行的块级帮助文本。</span>

相应的css源码：

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