【Bootstrap V4系列】学习入门教程之 组件-表单（Forms）高级用法

Layout 布局

由于Bootstrap将display:block和width:100%应用于几乎所有表单控件，因此默认情况下表单将垂直堆叠。其他类可用于根据每个表单更改此布局。

一、Form groups 表单组

.form-group 组类是向表单添加一些结构的最简单方法。它提供了一个灵活的类，鼓励对标签、控件、可选帮助文本和表单验证消息进行适当的分组。默认情况下，它只应用margin-bottom 边距底部，但会根据需要在.form-inline 内联中拾取其他样式。将其与<fieldset>s、<div>s或几乎任何其他元素一起使用。

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

页面展示效果：

二、Form grid 表单网格

使用我们的网格类可以构建更复杂的表单。将这些用于需要多列、不同宽度和其他对齐选项的表单布局。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

页面展示效果：

2.1 Form row 表单行

您还可以将.row替换为.form-row 行，这是我们标准网格行的一种变体，它覆盖了默认的柱槽，以实现更紧凑、更紧凑的布局。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

页面展示效果：

2.2 Horizontal form 水平形式表单

通过将.row 类添加到表单组中，并使用.col-*-* 类指定标签和控件的宽度，使用网格创建水平表单。请确保将.col-form-label 表单标签添加到您的<label>中，以便它们与关联的表单控件垂直居中。

有时，您可能需要使用边距或填充工具来创建所需的完美对齐。例如，我们删除了堆叠式单选框输入标签上的padding-top 填充顶部，以更好地对齐文本基线。

<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">
    </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">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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>

页面展示效果：

2.3 Column sizing 列尺寸

如前面的示例所示，我们的网格系统允许您在.row或.form-row 行中放置任意数量的.cols。他们将平均分配可用宽度。您还可以选择列的一个子集来占用更多或更少的空间，而其余的.cols则用特定的列类（如.col-7）平均分割其余的列。

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

页面展示效果：

2.4 Auto-sizing 自动调整大小

下面的示例使用flexbox实用程序将内容垂直居中，并将.col 更改为.col-auto，以便您的列只占用所需的空间。换句话说，列本身的大小取决于内容。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

页面展示效果：

当然，也支持自定义表单控件。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

页面展示效果：

三、Inline forms 内联表单

使用.form-inline 内联类在单个水平行上显示一系列标签、表单控件和按钮。内联表单中的表单控件与默认状态略有不同。

• 控件是display:flex，折叠任何HTML空白，并允许您使用间距和flexbox实用程序提供对齐控制。
• 控件和输入组接收width:auto以覆盖Bootstrap的默认宽度 width：100%。
• 控件仅在宽度至少为576px的视口中内联显示，以考虑移动设备上的窄视口。

您可能需要使用间距实用程序手动调整单个表单控件的宽度和对齐方式（如下所示）。最后，确保每个表单控件都包含一个<label>，即使您需要仅使用.sr-only对非屏幕阅读器访问者隐藏它。

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

页面展示效果：