编辑于 Github

形式

用于创建各种表单的表单控件样式，布局选项和自定义组件的示例和使用指南。

概观

确保在所有输入上使用适当的type属性（例如，电子邮件地址的email或数字信息的number）以利用更新的输入控件，如电子邮件验证，数字选择等。

这是一个演示Bootstrap表单样式的简单示例。继续阅读有关所需类，表单布局等的文档。

我们绝不会与其他任何人分享您的电子邮件。 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">电子邮件地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">我们绝不会与其他任何人分享您的电子邮件。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
      <label class="form-check-label">
          <input class="form-check-input" type="checkbox" value="">
  选项一是这个
          <span class="form-check-sign">
              <span class="check"></span>
          </span>
      </label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

表格控件

文本形式控件 - 如<input>s，<select>s和<textarea>s - 用.form-control类设置样式。包括用于一般外观，焦点状态，尺寸调整等的样式。

一定要探索我们的[自定义表单]（#custom-forms）来进一步设置<select>的样式。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">电子邮件地址</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">示例选择</label>
    <select class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">示例多选</label>
    <select multiple class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">示例Textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

对于文件输入, 交换 该.form-control for .form-file-upload and .form-file-simple or .form-file-multiple.

<div class="form-group form-file-upload form-file-simple">
    <input type="text" class="form-control inputFileVisible" placeholder="Simple chooser...">
    <input type="file" class="inputFileHidden">
  </div>

  <div class="form-group form-file-upload form-file-multiple">
    <input type="file" multiple="" class="inputFileHidden">
    <div class="input-group">
        <input type="text" class="form-control inputFileVisible" placeholder="Single File">
        <span class="input-group-btn">
            <button type="button" class="btn btn-fab btn-round btn-primary">
                <i class="material-icons">attach_file</i>
            </button>
        </span>
    </div>
  </div>

  <div class="form-group form-file-upload form-file-multiple">
    <input type="file" multiple="" class="inputFileHidden">
    <div class="input-group">
        <input type="text" class="form-control inputFileVisible" placeholder="Multiple Files" multiple>
        <span class="input-group-btn">
            <button type="button" class="btn btn-fab btn-round btn-info">
                <i class="material-icons">layers</i>
            </button>
        </span>
    </div>
  </div>

只读

在输入上添加readonly布尔属性以防止修改输入的值。只读输入显得更轻（就像禁用输入一样），但保留标准光标。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

例子

<div class="form-group label-floating has-success">
    <label class="control-label">成功输入</label>
          <input type="text" value="Success" class="form-control" />
    <span class="form-control-feedback">
    <i class="material-icons">done</i>
    </span>
  </div>
<div class="form-group label-floating has-danger">
      <label class="control-label">错误 输入</label>
        <input type="email" value="Error Input" class="form-control" />
        <span class="material-icons form-control-feedback">clear</span>
    </div>
group 
<div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
          <i class="material-icons">group</i>
      </span>
    </div>
    <input type="text" class="form-control" placeholder="With Material Icons">
  </div>
<div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="fa fa-group"></i>
      </span>
    </div>
    <input type="text" class="form-control" placeholder="With Font Awesome Icons">
  </div>

复选框和收音机

在.form-check`的帮助下改进了默认复选框和无线电，这两种输入类型的单个类改善了HTML元素的布局和行为。 复选框用于选择列表中的一个或多个选项，而无线电用于从多个选项中选择一个选项。

支持禁用复选框和无线电，但是为了在父“

默认（堆叠）

默认情况下，任意数量的立即兄弟的复选框和无线电将垂直堆叠，并用.form-check间隔。

<div class="form-check">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="">
选项一是这个和那个＆mdash;一定要包括为什么它很棒
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
    </label>
</div>

<div class="form-check disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="" disabled>
选项二是禁用
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
    </label>
</div>
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
 收音机关闭
        <span class="circle">
            <span class="check"></span>
        </span>
    </label>
</div>
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
   收音机开启
        <span class="circle">
            <span class="check"></span>
        </span>
    </label>
</div>

<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled>
  已禁用广播已关闭
        <span class="circle">
            <span class="check"></span>
        </span>
    </label>
</div>

排队

通过将.form-check-inline添加到任何.form-check，在同一水平行上对复选框或无线电进行分组。

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-radio form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    <span class="circle">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-radio form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    <span class="circle">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-radio form-check-inline disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
    <span class="circle">
        <span class="check"></span>
    </span>
  </label>
</div>

布局

由于Bootstrap将display：block和width：100％应用于几乎所有的表单控件，因此表单默认垂直堆叠。 可以使用其他类来基于每个表单更改此布局。

表格网格

可以使用我们的网格类构建更复杂的表单。 将这些用于需要多列，不同宽度和其他对齐选项的表单布局。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="名字">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="姓">
    </div>
  </div>
</form>

表格行

您也可以将.row换成.form-row，这是我们标准网格行的一种变体，它覆盖了默认的列装订线，以实现更紧凑，更紧凑的布局。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="名字">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="姓">
    </div>
  </div>
</form>

More complex layouts can also be created with the grid system.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">电子邮件</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">密码</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">地址</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">地址 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">市</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-3">
      <label for="inputState">州</label>
      <select id="inputState" class="form-control">
        <option selected>选择...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2 ml-auto">
      <label for="inputZip">压缩</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <label class="form-check-label">
          <input class="form-check-input" type="checkbox" value="">
     对我进行检查
          <span class="form-check-sign">
            <span class="check"></span>
          </span>
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">登入</button>
</form>

残疾人表格

在输入上添加disabled布尔属性以防止用户交互并使其显得更轻。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

在输入上添加disabled布尔属性以防止用户交互并使其显得更轻。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput"> 禁用输入</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">禁用选择菜单</label>
      <select id="disabledSelect" class="form-control">
        <option></option>
      </select>
    </div>
    <div class="form-check">
      <label class="form-check-label">
          <input class="form-check-input" type="checkbox" value="">
     不能检查我
          <span class="form-check-sign">
            <span class="check"></span>
          </span>
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form>

警告与锚

默认情况下，浏览器会将<fieldset disabled>中的所有本机表单控件（<input>，<select>和<button>元素）视为已禁用，从而阻止键盘和鼠标之间的交互。 但是，如果您的表单还包含<a ... class="btn btn- ">元素，那么这些元素只会被赋予pointer-events：none样式。 正如关于[按钮的禁用状态]（{{site.baseurl}} docs {{site.docs_version}}组件按钮#disable-state）（特别是锚元素的子部分）中所述，此CSS 属性尚未标准化，并且在Opera 18及更低版本或Internet Explorer 10中不完全受支持，并且不会阻止键盘用户关注或激活这些链接。 因此，为了安全起见，请使用自定义JavaScript来禁用此类链接。

跨浏览器兼容性

虽然Bootstrap将在所有浏览器中应用这些样式，但Internet Explorer 11及更低版本不完全支持<fieldset>上的disabled属性。 使用自定义JavaScript在这些浏览器中禁用字段集。

文件浏览器

...
选择图像 更改 Remove 
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
    <div class="fileinput-new thumbnail img-raised">
        <img src="http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" alt="...">
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
    <div>
        <span class="btn btn-raised btn-round btn-default btn-file">
            <span class="fileinput-new">选择图像</span>
            <span class="fileinput-exists">更改</span>
            <input type="file" name="..." />
        </span>
        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
    </div>
</div>

如果您想查看更多示例和属性，请查看官方 Bootstrap Documentation.