Bootstrap 表单输入
支持的表单控件
Bootstrap 支持以下表单控件
- input
- textarea
- checkbox
- 收音机
- select
Bootstrap 输入框
Bootstrap 支持所有 HTML5 输入类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
注意： 如果未正确声明其类型，输入框将不会被完全样式化！
以下示例包含两个输入元素；一个为 text 类型，一个为 password 类型
示例
<div class="form-group">
<label for="usr">姓名:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd">
</div>
自己动手试一试 »
Bootstrap 文本域
以下示例包含一个文本域
示例
<div class="form-group">
<label for="comment">评论:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
自己动手试一试 »
Bootstrap 复选框
复选框用于让用户从预设选项列表中选择任意数量的选项。
以下示例包含三个复选框。最后一个选项被禁用
示例
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>选项 3</label>
</div>
自己动手试一试 »
如果您希望复选框出现在同一行，请使用 .checkbox-inline 类
示例
<label class="checkbox-inline"><input type="checkbox" value="">选项 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">选项 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">选项 3</label>
自己动手试一试 »
Bootstrap 单选按钮
单选按钮用于将用户限制为从预设选项列表中仅选择一个选项。
以下示例包含三个单选按钮。第一个选项默认选中，最后一个选项被禁用
示例
<div class="radio">
<label><input type="radio" name="optradio" checked>选项 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">选项 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>选项 3</label>
</div>
自己动手试一试 »
如果您希望单选按钮出现在同一行，请使用 .radio-inline 类
示例
<label class="radio-inline"><input type="radio" name="optradio" checked>选项 1</label>
<label class="radio-inline"><input type="radio" name="optradio">选项 2</label>
<label class="radio-inline"><input type="radio" name="optradio">选项 3</label>
自己动手试一试 »
Bootstrap 选择列表
如果您想让用户从多个选项中选择，请使用选择列表。
以下示例包含一个下拉列表（选择列表）
示例
<div class="form-group">
<label for="sel1">选择列表:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
自己动手试一试 »
