Bootstrap 表单

Bootstrap的默认设置

表单控件使用 Bootstrap 自动接收一些全局样式：

全部文字化<input>,<textarea>，和<select>具有类的元素.form-control宽度为 100%。

Bootstrap 表单布局

Bootstrap 提供了三种类型的表单布局：

垂直形式（这是默认的）
卧式
内联表格

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

将标签和表单控件包装在<div class="form-group">（最佳间距所需）
添加类.form-control对所有文本<input>,<textarea>，和<select>元素

Bootstrap 垂直形式（默认）

电子邮件：

密码：

记住账号

以下示例创建一个具有两个输入字段、一个复选框和一个提交按钮的垂直表单：

示例

<form action="/action_page.html">
<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 内联表单

在内联形式中，所有元素都是内联的、左对齐的，并且标签位于旁边。

注意：这仅适用于宽度至少为 768 像素的视口内的表单！

内联表单的附加规则：

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

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

示例

<form class="form-inline" action="/action_page.html">
<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.html">
<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.html">
<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>

亲自试一试 »