Bootstrap4 表单输入
支持的表单控件
Bootstrap 支持以下表单控件：
- 输入
- 文本区域
- 复选框
- 收音机
- 选择
Bootstrap输入
Bootstrap 支持所有 HTML5 输入类型：文本、密码、日期时间、本地日期时间、日期、月份、时间、星期、数字、电子邮件、url、搜索、电话和颜色。
笔记：如果输入的类型未正确声明，则输入将不会被完全样式化！
以下示例包含两个输入元素；之一type="text"和其中之一type="password"。正如我们在“表单”一章中提到的，我们使用.form-control使用全角和适当填充等设置输入样式的类：
示例
<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="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
亲自试一试 »
示例解释
使用包装元素class="form-check"确保标签和复选框有适当的边距。
添加.form-check-label标签元素的类，以及.form-check-input在里面正确设置复选框的样式.form-check容器。
内联复选框
使用.form-check-inline如果您希望复选框出现在同一行，请使用以下类：
示例
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
亲自试一试 »
Bootstrap单选按钮
如果您希望限制用户只能从预设选项列表中进行一项选择，则可以使用单选按钮。
以下示例包含三个单选按钮。最后一个选项被禁用：
示例
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
亲自试一试 »
与复选框一样，使用.form-check-inline如果您希望单选按钮出现在同一行，请使用以下类：
示例
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
亲自试一试 »
Bootstrap选择列表
如果您希望允许用户从多个选项中进行选择，则可以使用选择列表。
以下示例包含一个下拉列表（选择列表）：
示例
<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>
亲自试一试 »
表单控制大小
更改表单控件的大小.form-control-sm或者.form-control-lg:
示例
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
亲自试一试 »
纯文本表单控件
使用.form-control-plaintext如果您想将输入字段设置为纯文本样式：
表单控制文件和范围
添加.form-control-range上课到input type"range"或者.form-control-file到input type"file"设置全角范围控件或文件字段的样式：
示例
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
亲自试一试 »