Bootstrap 支持以下表单控件:
Bootstrap 支持所有 HTML5 输入类型:文本、密码、日期时间、本地日期时间、日期、月份、时间、星期、数字、电子邮件、url、搜索、电话和颜色。
笔记:如果输入的类型未正确声明,则输入将不会被完全样式化!
以下示例包含两个输入元素;一种文本类型和一种密码类型:
<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>
亲自试一试 »
以下示例包含一个文本区域:
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
亲自试一试 »
如果您希望用户从预设选项列表中选择任意数量的选项,则可以使用复选框。
以下示例包含三个复选框。最后一个选项被禁用:
<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>
亲自试一试 »
如果您希望限制用户只能从预设选项列表中进行一项选择,则可以使用单选按钮。
以下示例包含三个单选按钮。默认情况下选中第一个选项,并禁用最后一个选项:
<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>
亲自试一试 »
如果您希望允许用户从多个选项中进行选择,则可以使用选择列表。
以下示例包含一个下拉列表(选择列表):
<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>
亲自试一试 »
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!