Bootstrap 4 表单输入
支持的表单控件
Bootstrap 支持以下表单控件
- input
- textarea
- checkbox
- 收音机
- 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">名称:</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="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">选项 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">选项 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>选项 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="">选项 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">选项 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>选项 3
</label>
</div>
自己动手试一试 »
Bootstrap 单选按钮
单选按钮用于将用户限制为从预设选项列表中仅选择一个选项。
以下示例包含三个单选按钮。最后一个选项已禁用。
示例
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">选项 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">选项 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>选项 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">选项 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">选项 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>选项 3
</label>
</div>
自己动手试一试 »
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>
自己动手试一试 »
表单控件大小调整
使用 .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
。
表单控件文件和范围
为 input type="range"
添加 .form-control-range
类,或为 input type="file"
添加 .form-control-file
,以全宽样式化范围控件或文件字段。
示例
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
自己动手试一试 »