Bootstrap 垂直表单、水平表单、内联表单

Bootstrap 是一个由 Twitter 开发的前端开发框架，它包含了一些组件和工具，使前端开发更加快捷和简单。其中，表单是一个经常使用的组件，而 Bootstrap 提供了三种表单样式，分别为垂直表单、水平表单和内联表单。

垂直表单

垂直表单是最常用的表单样式，其布局方式为垂直排列。下面是一个简单的示例代码：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </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 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

可以看到，垂直表单的 HTML 结构比较简单，使用了 .form-group 和 .form-control 类来控制表单组和表单元素的样式。如果需要在表单元素后添加说明文字，可以使用 .form-text 类。

水平表单

水平表单的布局方式为左对齐，与垂直表单相比，其更适合于一些字段较少的表单。下面是一个水平表单的示例代码：

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Option two can be something else and selecting it will deselect option one
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Option three is disabled
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

可以看到，水平表单的 HTML 结构与垂直表单略有不同，主要是使用了 .row 和 .col-* 类来实现水平排列。在水平表单中，每个表单组使用一个 .form-group 类，每个表单组中的表单元素需要使用 .col-* 类，其中 * 表示对应的列数（最大为12）。

内联表单

内联表单通常用于小型表单，在布局上与水平表单类似，但是它的表单元素与标签在同一行内显示。下面是一个内联表单的示例代码：

<form class="form-inline">
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

可以看到，内联表单的 HTML 结构比较简单，主要是使用了 .form-inline 类来实现内联布局，表单组和表单元素同样使用 .form-group 类和 .form-control 类来控制样式，但是在内联表单中，.form-control 类需要和 .form-group 类同时添加。

以上就是 Bootstrap 中三种表单样式的介绍，它们都可以使用大部分的表单元素和组件，开发者可以根据实际需求选择合适的表单样式来使用。