Bootstrap4 表单学习笔记

介绍

Bootstrap是一个流行的前端框架，其中包含了许多有用的功能和组件，可以帮助您快速设计美观、响应式的网站。在Bootstrap中，表单是非常重要的组件，我们可以使用表单来收集用户的输入信息，从而实现与用户的交互。

基本表单

在Bootstrap中，通过<form>标签来创建表单。通过添加class属性值为form-control，可以将表单元素（如文本框和下拉列表框）调整为适合屏幕宽度的大小，以及添加其他样式。

以下是一个基本表单的实例：

markdownCopy Code
<!-- Form -->
<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>

在上面的例子中，我们创建了一个包含输入电子邮件和密码的基本表单。我们还添加了一个复选框和提交按钮。

内联表单

通过将表单的class属性值设置为form-inline，可以创建内联表单。内联表单与基本表单不同，因为它们每个表单元素之间没有换行符，并且所有元素保持在一行上。

以下是一个内联表单的实例：

markdownCopy Code
<!-- Inline Form -->
<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>

垂直表单

通过将表单的class属性值设置为form-vertical，可以创建垂直表单。在垂直表单中，每个表单元素都位于单独的行上。

以下是一个垂直表单的实例：

markdownCopy Code
<!-- Vertical Form -->
<form class="form-vertical">
  <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>

水平表单

通过将表单的class属性值设置为form-horizontal，可以创建水平表单。在水平表单中，标签和表单元素呈现在同一行上，对于竖向布局空间受限的情况比较适用。

以下是一个水平表单的实例：

markdownCopy Code
<!-- Horizontal Form -->
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

结论

Bootstrap提供了许多有用的表单组件和布局选项，可以帮助我们快速设计漂亮、响应式的表单。在创建自己的表单时，您可以根据需要选择适合自己的表单类型和组件，并为其添加自己的风格和交互性。