本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。

本文主要来讲解以下内容：

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

基本案例

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。

<form role="form">

<div class="form-group">

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

</div>

<div class="form-group">

<label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

</div>

<div class="form-group">

<label for="exampleInputFile">File input</label>

<input type="file" id="exampleInputFile">

<p class="help-block">Example block-level help text here.</p>

</div>

<div class="checkbox">

<label>

<input type="checkbox"> Check me out    </label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

两个文本框的宽度的确为100%。并且有三个form-group。

内联表单

为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。

需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。

一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。

<form class="form-inline" role="form">

<div class="form-group">

<label class="sr-only" for="exampleInputEmail2">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">

</div>

<div class="form-group">

<label class="sr-only" for="exampleInputPassword2">Password</label>

<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">

</div>

<div class="checkbox">

<label>

<input type="checkbox"> Remember me    </label>

</div>

<button type="submit" class="btn btn-default">Sign in</button>

</form>

水平排列的表单

通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。

<form class="form-horizontal" role="form">

<div class="form-group">

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

<div class="col-sm-10">

<input type="email" class="form-control" id="inputEmail3" placeholder="Email">

</div>

</div>

<div class="form-group">

<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

<div class="col-sm-10">

<input type="password" class="for