Bootstrap 3:字段顶部的标签和表单内联中的提交按钮

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。Bootstrap 3 是该框架的第三个版本，提供了丰富的组件和样式，帮助开发者快速构建美观且功能齐全的网页。

在 Bootstrap 3 中，表单组件是非常重要的一部分。表单通常包括输入字段和标签，以及提交按钮。标签用于描述输入字段的作用，而提交按钮用于提交表单数据。

类型

Bootstrap 3 中的表单组件包括：

垂直表单：标签位于输入字段的上方。
水平表单：标签和输入字段在同一行显示。
内联表单：表单元素在一行内显示，适用于简单的表单。

应用场景

用户注册和登录：用于收集用户信息的表单。
搜索表单：用于实现搜索功能的表单。
联系表单：用于用户提交反馈或咨询的表单。

示例代码

以下是一个简单的 Bootstrap 3 表单示例，展示了字段顶部的标签和内联中的提交按钮：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 3 Form Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .form-inline .form-group {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 垂直表单 -->
    <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>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <!-- 内联表单 -->
    <form class="form-inline mt-3">
      <div class="form-group mx-sm-3 mb-2">
        <label for="inlineFormInputName" class="sr-only">Name</label>
        <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <label for="inlineFormInputEmail" class="sr-only">Email</label>
        <input type="email" class="form-control" id="inlineFormInputEmail" placeholder="jane.doe@example.com">
      </div>
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>