bootstrap-form表单

bootstrap提供了三种表单形式，分别是

• 垂直表单（默认）
• 内联表单
• 水平表单

1.垂直表单

在<form> 中添加<div class="form-group"> 将元素包裹在 .form-group 中可以获得最好的排列，最后向文本元素添加class.form-control
设置了.form-control 的<input>、<textarea> 和 <select>元素默认宽度为 width: 100%;

<form>
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" 
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

运行结果：

2.内联表单

为 <form>元素添加.form-inline类可使其内容左对齐并且表现为 inline-block 级别的控件，在内联表单中，元素的宽度为 width: auto;

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" 
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

运行结果：

3.水平表单

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

<form class="form-horizontal">
    <div class="form-group">
        <label for="exampleInputName2" class="col-md-2 control-label">Name</label>
        <div class="col-md-10">
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2" class="col-md-2 control-label">Email</label>
        <div class="col-md-10">
            <input type="email" class="form-control" id="exampleInputEmail2" 
        </div>
    </div>
    <button type="submit" class="btn btn-default col-md-offset-2 col-md-2">Send invitation</button>
</form>

运行结果：