在 Bootstrap 4 中，表单是一个常用组件，用于获取用户输入。它提供了丰富的样式和功能，使表单的创建更加简单且响应式。Bootstrap 4 的表单组件包括文本输入框、选择框、复选框、单选框、文本区域、文件上传等。

1. 基本表单

一个最基础的表单包含输入字段、标签和提交按钮。

示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="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>

解释：

  • form-group：每个表单元素的包装容器，确保标签和输入框对齐并有适当的间距。
  • form-control：用于文本输入框、密码框等的样式类，使其适应 Bootstrap 的设计。
  • form-check：用于复选框和单选框的容器。
  • btn btn-primary：用于按钮的样式类，btn-primary 表示一个蓝色按钮。

2. 响应式表单

Bootstrap 4 提供了响应式功能，表单能够根据屏幕大小自动调整布局。你可以通过使用网格系统（col-* 类）使表单在不同设备上有不同的显示效果。

示例：

<form>
  <div class="form-row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" class="form-control" id="firstName" placeholder="First Name">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" id="lastName" placeholder="Last Name">
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

解释：

  • form-row：用来包装表单行，确保每个输入框都在正确的列中显示。
  • col-md-6：使每个输入框在中等屏幕（md）及以上的设备上占据 6 列宽度，形成两列布局。

3. 表单控件的大小

Bootstrap 允许你调整表单控件的大小。可以使用 form-control-lg 或 form-control-sm 来增大或缩小输入框。

示例：

<form>
  <div class="form-group">
    <label for="exampleInputLarge">Large input</label>
    <input type="text" class="form-control form-control-lg" id="exampleInputLarge" placeholder="Large input">
  </div>
  <div class="form-group">
    <label for="exampleInputSmall">Small input</label>
    <input type="text" class="form-control form-control-sm" id="exampleInputSmall" placeholder="Small input">
  </div>
</form>

解释：

  • form-control-lg：增大输入框尺寸。
  • form-control-sm：缩小输入框尺寸。

4. 输入验证

Bootstrap 4 提供了内置的表单验证样式，你可以使用 is-valid 或 is-invalid 类来显示验证状态。

示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control is-invalid" id="exampleInputEmail" placeholder="Enter email" required>
    <div class="invalid-feedback">
      Please enter a valid email address.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

解释：

  • is-invalid：为表单输入框添加该类来表示输入无效。
  • invalid-feedback：用来显示错误信息。

5. 自定义控件

你还可以自定义一些表单控件，如复选框、单选框、文件上传等。

示例：

<form>
  <div class="form-group">
    <label for="exampleCheck1">Check this custom checkbox</label>
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
  </div>
  <div class="form-group">
    <label for="exampleFile">Choose file</label>
    <input type="file" class="form-control-file" id="exampleFile">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

解释：

  • form-check-input：为复选框或单选框添加的类，使其符合 Bootstrap 样式。
  • form-control-file：为文件上传按钮添加的样式类。

6. 表单控件组

表单控件组允许你将多个控件组合在一起，如多个单选按钮、复选框等。

示例：

<form>
  <div class="form-group">
    <label for="exampleRadios">Radio button group</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
      <label class="form-check-label" for="exampleRadios1">
        Option 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
      <label class="form-check-label" for="exampleRadios2">
        Option 2
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

解释：

  • form-check-input：为单选按钮或复选框添加的类。
  • form-check-label：为单选按钮或复选框的标签添加的类。

7. 禁用表单控件

如果你希望禁用某个表单控件（例如文本框、按钮等），可以使用 disabled 属性。

示例：

<form>
  <div class="form-group">
    <label for="disabledInput">Disabled input</label>
    <input type="text" class="form-control" id="disabledInput" placeholder="Disabled input" disabled>
  </div>
  <button type="submit" class="btn btn-primary" disabled>Submit</button>
</form>

解释：

  • disabled：禁用该控件，用户无法与之交互。

8. 表单布局

Bootstrap 4 提供了灵活的布局选项，可以根据需要对表单进行布局。

示例：

<form>
  <div class="form-row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" class="form-control" id="firstName" placeholder="First Name">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" id="lastName" placeholder="Last Name">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email">
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

解释：

  • form-row：用于创建表单的行。
  • col-md-4：使用网格系统在中等及更大屏幕上将输入框划分为 3 等分。

总结

  • form-group：用于组织每个表单控件（输入框、按钮、标签等）。
  • form-control：用于文本输入框、密码框等控件的样式类。
  • form-check：用于复选框和单选框的容器。
  • btn：用于为表单按钮提供样式。
  • form-control-lg、form-control-sm：分别调整表单控件的大小。
  • is-valid、is-invalid：用于输入验证状态。

Bootstrap 4 提供了丰富的功能和样式，能帮助你快速设计漂亮且响应式的表单。希望这些示例对你有所帮助！