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文档并学习相关知识。