Bootstrap4 表单控件
Bootstrap4 表单控件
Bootstrap是一个流行的前端框架，用于快速构建响应式和移动优化的网站。Bootstrap一直以来都非常注重表单的优化，提供了大量的表单控件，使得用户可以更加方便地输入数据。本文将介绍一些常用的Bootstrap4表单控件。
文本框
使用文本框控件可以接受用户的文本输入。Bootstrap为文本框控件提供了默认的样式，以及各种状态的样式（如，聚焦、无效、禁用等）。下面展示一个基本的文本框控件的HTML代码：
<input type="text" class="form-control" placeholder="请输入文本" aria-label="请输入文本">
form-control类为控件提供了基本的样式和结构，placeholder属性定义了控件中默认显示的文本，aria-label属性为屏幕阅读器提供了一个说明文本。
文本域
文本域控件与文本框类似，可以接受用户输入文本，但是文本域控件可以接受多行文本输入。下面展示一个基本的文本域控件的HTML代码：
<textarea class="form-control" rows="3" placeholder="请输入文本"></textarea>
rows属性定义了控件的高度。如果需要动态调整高度，可以借助第三方库autosize.js来实现。
<textarea class="form-control autosize" rows="1" placeholder="请输入文本"></textarea>
// 引入autosize.js库
<script src="https://cdn.bootcdn.net/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>
// 初始化autosize库
autosize(document.querySelectorAll('.autosize'));
</script>
选择器
选择器控件允许用户从预定义的选项中进行选择。Bootstrap4为选择器控件提供了两种样式：单选按钮和下拉单选框。
单选按钮
下面展示一个基本的单选按钮组的HTML代码：
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio1" value="option1" checked>
<label class="form-check-label" for="exampleRadio1">
单选按钮1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio2" value="option2">
<label class="form-check-label" for="exampleRadio2">
单选按钮2
</label>
</div>
form-check类可以组织按钮的结构，form-check-input和form-check-label类可以为按钮和标签元素提供样式。
下拉单选框
下面展示一个基本的下拉单选框的HTML代码：
<div class="form-group">
<label for="exampleSelect">选择框</label>
<select class="form-control" id="exampleSelect">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
</div>
form-group类为控件提供了默认的外观和结构，form-control类为<select>元素提供了样式。
开关按钮
开关按钮控件可以切换开和关两种状态。下面展示一个基本的开关按钮控件的HTML代码：
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="exampleSwitch">
<label class="form-check-label" for="exampleSwitch">开关按钮</label>
</div>
form-switch类为控件提供了基本的样式和结构，form-check-input和form-check-label类为按钮和标签元素提供样式。
按钮
按钮控件可以使用在表单内或表单外，Bootstrap4为按钮控件提供了四种样式：实心、轮廓、链接、禁用。下面展示一个基本的实心按钮的HTML代码：
<button type="button" class="btn btn-primary">按钮</button>
btn类为控件提供了基本的样式和结构，btn-primary类为按钮元素提供了默认的背景颜色。
总结
本文介绍了Bootstrap4中一些常用的表单控件的HTML代码和样式类，实现了基础的表单输入和选择功能。如果需要自定义更多的样式和交互逻辑，可以查看Bootstrap4文档并学习相关知识。