Bootstrap 表单输入

支持的表单控件

Bootstrap 支持以下表单控件:

  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap 输入类型

Bootstrap 支持所有 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color。

注释: 如果输入的类型未正确声明,则不会完全设置输入的样式!

以下示例包含两个输入元素;其中一种为文本,另一种为密码:

实例

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>
亲自试一试 »

Bootstrap 文本域

下面的示例包含一个文本域:

实例

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>
亲自试一试 »


Bootstrap 复选框

如果希望用户从预设选项列表中选择任意数量的选项,则使用复选框。

以下示例包含三个复选框。最后一个选项被禁用:

实例

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option 3</label>
</div>
亲自试一试 »

如果希望复选框显示在同一行,请使用 .checkbox-inline 类:

实例

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
亲自试一试 »

Bootstrap 单选按钮

如果要将用户限制为仅从预设选项列表中选择一个选项,可以使用单选按钮。

以下示例包含三个单选按钮。默认情况下,第一个选项处于选中状态,最后一个选项处于禁用状态:

实例

<div class="radio">
  <label><input type="radio" name="optradio" checked>Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
亲自试一试 »

如果希望单选按钮显示在同一行,请使用 .radio-inline 类:

实例

<label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
亲自试一试 »

Bootstrap 选择列表


如果希望允许用户从多个选项中进行选择,则使用选择列表。

以下示例包含一个下拉列表(Select 选择列表):

实例

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>
亲自试一试 »