Bootstrap 4 表单输入
支持的表单控件
Bootstrap 支持以下表单控件:
- input
- textarea
- checkbox
- radio
- select
Bootstrap 输入类型
Bootstrap 支持所有 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color。
注释: 如果输入的类型未正确声明，则不会完全设置输入的样式！
以下示例包含两个输入元素；其中一个是 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 Select 选择列表
如果希望允许用户从多个选项中进行选择，则使用选择列表。
以下示例包含一个下拉列表（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>
亲自试一试 »
表单控制大小
更改个表单控件的大小使用 .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">
亲自试一试 »
