详解Bootstrap创建表单的三种格式（一）

2023年6月10日下午8:24 • JavaScript

我可以给你详细讲解一下“详解Bootstrap创建表单的三种格式（一）”的完整攻略。

标题

首先，我们需要了解Bootstrap是什么以及它的作用。Bootstrap是Twitter公司开源的一款前端开发框架，主要用于快速实现响应式布局和美化各类界面。特别是在表单的开发中，它们的优势会显得更加明显。Bootstrap提供了三种创建表单的格式，接下来分别进行详细讲解。

垂直表单

垂直表单是Bootstrap默认创建的表单样式，在开发中使用最广泛，也是最常用的格式之一。我们只需要将<form>元素的class属性设为form-vertical即可。

<form class="form-vertical">
  <div class="form-group">
    <label for="exampleInputUserName">User Name</label>
    <input type="text" class="form-control" id="exampleInputUserName" placeholder="Enter user name">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter password">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

上面的代码会创建一个垂直的表单，表单中包含两个输入框（User Name和Password）、一个复选框（Remember me）以及一个提交按钮（Submit）。其中，<div class="form-group">用于将表单控件组合在一起，<label>用于标签，<input>用于输入框的定义，<button>用于提交按钮的定义。

水平表单

水平表单会将表单控件全部横向排列，在某些需要保留输入框宽度的场景下特别适用。在创建时，需要将<form>元素的class属性设为form-horizontal，并且在每个表单控件前添加<label>标签并设置相应的class属性。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="exampleInputEmail1">Email address</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="exampleInputPassword2">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="exampleInputFile">File input</label>
    <div class="col-sm-10">
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </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">Submit</button>
    </div>
  </div>
</form>

上面的代码会创建一个水平的表单，表单中包含三个输入框（Email address、Password和File input）、一个帮助文本（Example block-level help text here）、一个复选框（Remember me）以及一个提交按钮（Submit）。其中，<div class="form-group">和前面垂直表单的一样，但添加了一个class="col-sm-offset-2 col-sm-10"的元素来设置输入框的宽度。

行内表单

行内表单是一种排列在一行的表单样式，在某些场景中效果非常好。我们只需要将<form>元素的class属性设为form-inline即可。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

上面的代码会创建一个行内的表单，表单中包含两个输入框（Name和Email）、一个复选框（Remember me）以及一个提交按钮（Send invitation）。其中，<div class="form-group">为输入框添加一个包装元素，class="form-control"用于设置输入框的样式，<button>用于创建提交按钮。