CSS Bootstrap 3 垂直表单及一行内联输入框

在本文中，我们将介绍如何使用CSS和Bootstrap 3来创建一个带有一行内联输入框的垂直表单。通过本文的指导，你将学习如何使用CSS来定制Bootstrap 3的表单样式，以及如何在表单中插入行内输入框。

阅读更多：CSS 教程

什么是Bootstrap?

Bootstrap是一个流行的前端开发框架，它提供了一套用于构建响应式和移动优先网站的工具和样式。Bootstrap提供了各种预定义的CSS类和组件，使网页开发更加简单和高效。

什么是垂直表单？

垂直表单是指表单中的各个表单项以垂直方向排列。在垂直表单中，每个表单项都独占一行，使表单更易于阅读和填写。

创建垂直表单

要创建一个垂直表单，我们首先需要使用Bootstrap的form类。在表单元素之外包裹一个<div>元素，并为该元素添加class="form"。接下来，在<div>元素中，我们可以逐个添加表单项。

<div class="form">
  <label for="name">姓名</label>
  <input type="text" id="name">

  <label for="email">邮箱</label>
  <input type="email" id="email">

  <label for="password">密码</label>
  <input type="password" id="password">
</div>

上面的代码创建了一个带有姓名、邮箱和密码的垂直表单。每个表单项都使用<label>元素来显示标签，并使用<input>元素来接收用户的输入。

使用Bootstrap样式美化表单

虽然上面的代码已经创建了一个简单的垂直表单，但默认的样式可能过于简单。为了美化表单，我们可以使用Bootstrap提供的各种CSS类。

首先，我们可以在外层的<div>元素上添加class="form-group"，以应用Bootstrap的表单组样式。这样可以在表单项之间添加适当的间距，使表单更具可读性。

<div class="form form-group">
  <label for="name">姓名</label>
  <input type="text" id="name">

  <label for="email">邮箱</label>
  <input type="email" id="email">

  <label for="password">密码</label>
  <input type="password" id="password">
</div>

除了表单组样式之外，我们还可以使用其他Bootstrap的CSS类来美化表单项。

例如，我们可以添加class="form-control"到每个输入框，以应用Bootstrap的默认输入框样式。这样可以使输入框更加美观和易于使用。

<div class="form form-group">
  <label for="name">姓名</label>
  <input type="text" id="name" class="form-control">

  <label for="email">邮箱</label>
  <input type="email" id="email" class="form-control">

  <label for="password">密码</label>
  <input type="password" id="password" class="form-control">
</div>

如果我们想为表单项添加额外的描述信息，可以使用Bootstrap的help-block类。在每个<label>后面添加一个带有class="help-block"的<p>元素，并在其中添加描述文本。

<div class="form form-group">
  <label for="name">姓名</label>
  <input type="text" id="name" class="form-control">
  <p class="help-block">请输入您的姓名</p>

  <label for="email">邮箱</label>
  <input type="email" id="email" class="form-control">
  <p class="help-block">请输入有效的邮箱地址</p>

  <label for="password">密码</label>
  <input type="password" id="password" class="form-control">
  <p class="help-block">请输入至少6位的密码</p>
</div>

通过添加help-block类，我们为每个表单项提供了额外的描述信息，使用户更容易理解如何正确填写表单。

在垂直表单中插入行内输入框

有时候，在垂直表单中一行内插入多个输入框可以提高用户填写表单的效率。想要在垂直表单中插入一行内联输入框，我们可以使用Bootstrap的栅格系统。

首先，我们需要将表单项包装在一个具有.row类的<div>元素中。然后，在该<div>元素中，我们可以使用col-*-*类来指定每个输入框所占据的栅格大小。

例如，如果我们想要在一行内插入姓名和邮箱两个输入框，可以将它们包装在一个带有.row类的<div>元素中，并分别使用col-md-6类来指定它们各自的栅格大小。

<div class="form form-group">
  <label for="name">姓名</label>
  <div class="row">
    <input type="text" id="name" class="form-control col-md-6">

    <label for="email">邮箱</label>
    <input type="email" id="email" class="form-control col-md-6">
  </div>

  <label for="password">密码</label>
  <input type="password" id="password" class="form-control">
  <p class="help-block">请输入至少6位的密码</p>
</div>

上面的代码中，姓名和邮箱两个输入框被放在一个.row类的<div>元素中，并且分别使用col-md-6类指定它们各自的栅格大小。这样，它们就能在同一行内显示，并且合理地占用了页面的空间。