如何使用 Bootstrap 创建垂直或基本表单？

Bootstrap 是一个流行的前端开发框架，可以简化 web 应用程序的界面设计。在 Bootstrap 中，您可以轻松地创建垂直或基本表单。下面将介绍如何使用 Bootstrap 创建这些表单。

创建垂直表单

垂直表单是在垂直方向上布置表单控件的一种表单类型。在 Bootstrap 中，您可以使用以下 HTML 代码创建垂直表单：

<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>

这段代码将创建一个简单的垂直表单，包括三个表单控件：电子邮件输入框、密码输入框和复选框。在表单的末尾还有一个提交按钮。

创建基本表单

基本表单是一种水平显示控件的表单类型。在 Bootstrap 中，您可以使用以下 HTML 代码创建基本表单：

<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">
            First radio
          </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">
            Second radio
          </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">
            Third disabled radio
          </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>

这段代码将创建一个基本表单，包括两个输入框（一个邮箱输入框和一个密码输入框）、一组单选按钮、一个复选框和一个提交按钮。请注意，为了将表单控件与其标签对齐，我们在每个表单组中都使用了 Bootstrap 的 grid 系统。

总结

在 Bootstrap 中，您可以轻松地创建垂直或基本表单，以提高 web 应用程序的用户体验。上面的代码示例可以帮助您入门并构建您自己的表单。如果您在实现过程中遇到了问题，请查阅 Bootstrap 文档或向社区寻求帮助。