Bootstrap 表单


Bootstrap 的默认设置

表单控件会自动接收一些带有 Bootstrap 的全局样式:

具有 .form-control 类的所有文本 <input>, <textarea>, 和 <select> 元素的宽度均为 100%。


Bootstrap 表单布局

Bootstrap 提供三种表单布局:

  • 垂直表单(默认值)
  • 水平表单
  • 内联表单

所有三种表单布局的标准规则:

  • <div class="form-group"> 中包装标签和表单控件(需要最佳间距)
  • .form-control 类添加到所有文本 <input>, <textarea>, 和 <select> 元素中

Bootstrap 垂直表单(默认值)

以下示例创建了一个垂直表单,其中包含两个输入字段、一个复选框和一个提交按钮:

实例

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
亲自试一试 »


Bootstrap 内联表单

在内联表单中,所有元素都是内联的、左对齐的,标签是并排的。

注意:这只适用于小于 768px 的视口中的表单!

内联表单的附加规则:

  • .form-inline 类添加到 <form> 元素中

以下示例创建了一个包含两个输入字段、一个复选框和一个提交按钮的内联表单:

实例

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
亲自试一试 »

提示: 如果你没有为每一个输入都添加标签,屏幕阅读器就会对你的表单产生问题。通过使用 .sr-only 类,可以隐藏除屏幕阅读器以外的所有设备的标签:

实例

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
亲自试一试 »

Bootstrap 水平表单

水平表单意味着标签与大屏幕和中屏幕上的输入字段(水平)对齐。在小屏幕(767px 及以下)上,它将转换为垂直表单(标签放置在每个输入的顶部)。

水平表单的附加规则:

  • .form-horizontal 类添加到 <form> 元素中
  • 将类 .control-label 添加到所有 <label> 元素

提示: 使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。

下面的示例创建了一个带有两个输入字段、一个复选框和一个提交按钮的水平表单。

实例

<form class="form-horizontal" action="/action_page.php">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter 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">Submit</button>
    </div>
  </div>
</form>
亲自试一试 »