在本教程中，我们将学习在Bootstrap中设置表单样式。

表格是任何的重要组成部分。
它允许用户提交数据和获取数据。
Bootstrap提供了可帮助我们设计表单样式的类。

表格组类

将"标签"和"输入"或者"选择"之类的控件包装在" .form-group"中以保持适当的间距。

<form>
  <div class="form-group">
    <!-- some more html elements goes here -->
  </div>
</form>

表单控制类

我们可以在所有文本" <input>"，" <select>"和" <textarea>"上使用" .form-control"类，以将其宽度默认设置为100％。

<form>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email"
           class="form-control"
           id="email"
           name="email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           class="form-control"
           id="password"
           name="password">
  </div>
  <div class="form-group">
    <label for="file">Upload File</label>
    <input type="file"
           id="image"
           name="image">
  </div>
  <div class="form-group">
    <label for="description">Description</label>
    <textarea rows="3"
           class="form-control"
           id="description"
           name="description"></textarea>
  </div>
  <div class="form-group">
    <label for="file">Upload File</label>
    <select class="form-control"
           id="team"
           name="team">
      <option value="-">--- Select Team ---</option>
      <option value="team-a">Team A</option>
      <option value="team-b">Team B</option>
      <option value="team-c">Team C</option>
    </select>
  </div>
  <button type="submit"
          class="btn btn-success">
    Submit
  </button>
</form>

内联表格

为了创建内联表单，我们在开始表单标签中使用.form-inline类。

这仅适用于视口内宽度至少为768px的表单。

<form class="form-inline">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email"
           class="form-control">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           class="form-control">
  </div>
  <button type="submit"
          class="btn btn-primary">
    Login
  </button>
</form>

水平形式

为了创建水平表单，我们在开始表单标签中使用.form-horizontal类。

<form class="form-horizontal">
  <div class="form-group">
    <label for="email"
           class="col-sm-2 control-label">Email</label>
    <div class="col-sm-6">
      <input type="email"
             class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="password"
           class="col-sm-2 control-label">Password</label>
    <div class="col-sm-6">
      <input type="password"
             class="form-control col-sm-10">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
      <button type="submit"
              class="btn btn-primary">
        Login
      </button>
    </div>
  </div>
</form>

输入文件

对于输入文件类型，我们不使用.form-control类。
如果要在其周围使用边框，则可以使用它。

没有.form-control类。

<div class="form-group">
  <label for="file">Upload File</label>
  <input type="file"
         id="image"
         name="image">
</div>

使用.form-control类。

<div class="form-group">
  <label for="file">Upload File</label>
  <input type="file"
         class="form-control"
         id="image"
         name="image">
</div>

选框

当我们要允许用户选择多个选项时，请使用该复选框。
要设置复选框的样式，我们使用.checkbox类。

<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 3">
    Option 3
  </label>
</div>

内联复选框

为了使复选框内联，我们使用.checkbox-inline类。

<div class="checkbox-inline">
  <label>
    <input type="checkbox"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="checkbox-inline">
  <label>
    <input type="checkbox"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="checkbox-inline">
  <label>
    <input type="checkbox"
           value="Option 3">
    Option 3
  </label>
</div>

禁用复选框

为了禁用复选框，我们使用.disabled类，并将disabled属性添加到输入元素。

<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox"
           value="Option 3"
           disabled>
    Option 3
  </label>
</div>

单选框

当我们要允许用户从许多选项中仅选择一个选项时，我们使用单选框。

<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 3">
    Option 3
  </label>
</div>

嵌入式单选框

为了使收内联单选框，我们使用.radio-inline类。

<div class="radio-inline">
  <label>
    <input type="radio"
           name="options"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="radio-inline">
  <label>
    <input type="radio"
           name="options"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="radio-inline">
  <label>
    <input type="radio"
           name="options"
           value="Option 3">
    Option 3
  </label>
</div>

禁用单选框

为了禁用单选框，我们使用.disabled类，并将disabled属性添加到输入元素。

<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio"
           name="options"
           value="Option 3"
           disabled>
    Option 3
  </label>
</div>

这涵盖了表单的一些常用元素。
有关更多详细信息，请访问Bootstrap官方。