Bootstrap's默认设置
表单控件自动接收与一些全球性的造型Bootstrap ：
所有文本<input> <textarea>和<select>与类元素.form-control有100％的宽度。
Bootstrap表单布局
Bootstrap提供了三种形式的布局：
- 垂直形式（这是默认）
- 卧式成形
- 内嵌形式
所有三种形式的布局标准的规则：
- 始终使用
<form role="form">（有助于提高辅助功能使用屏幕阅读器的人） - 包装标签和表单控件的
<div class="form-group">（需要的最佳间距） - 类添加
.form-control的所有文本<input><textarea>和<select>元素
Bootstrap立式（默认）
下面的例子创建一个垂直的形式有两个输入字段，一个复选框和一个提交按钮：
例
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> 试一试» Bootstrap内嵌表
在内联形式，所有的元素是内联的，左对齐，且标签是旁边。
注：这仅适用于表单中viewports的至少768px宽！
一个内嵌的形式附加规则：
- 类添加
.form-inline到<form>元素
下面的示例创建两个输入字段，一个复选框内嵌的形式，一个提交按钮：
例
<form class="form-inline" role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> 试一试» 提示：如果您不包括每个输入标签，屏幕阅读器将与表单的麻烦。 您可以隐藏所有设备的标签，除了屏幕阅读器，通过使用.sr-only类：
例
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
class="sr-only"
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> 试一试» Bootstrap水平表
一个水平的形式从其他形式都在标记的量，并且在形式的呈现脱颖而出。
对于水平的形式附加规则：
- 添加类
.form-horizontal到<form>元素 - 一流的加入
.control-label所有<label>元素
提示：使用Bootstrap's预定义的网格类对准标签和表单控件组水平布局。
下面的示例创建两个输入字段，一个复选框水平的形式，一个提交按钮：
例
<form class="form-horizontal" role="form">
<div
class="form-group">
<label class="control-label
col-sm-2" for="email">Email:</label>
<div
class="col-sm-10">
<input type="email"
class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input
type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div
class="form-group">
<div class="col-sm-offset-2
col-sm-10">
<button type="submit" class="btn
btn-default">Submit</button>
</div>
</div>
</form> 试一试»