Bootstrap4 输入框组
Bootstrap4是当前最流行的前端开发框架之一,它能够使开发者快速、高效地构建网站和应用程序。其中一个最受欢迎的组件是输入框组,在本文中,我将详细介绍Bootstrap4的输入框组。
输入框组基础
输入框组由文本框和一个或多个附加按钮或文本标签组成。我们可以使用Bootstrap4的<div>
元素和一些相关的类来创建输入框组。下面是一个基本的例子:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
</div>
在这个例子中,我们使用了input-group
和input-group-prepend
类来创建一个输入框组。文本框由input
元素和form-control
类创建,后者确保文本框填充整个输入框组的宽度。placeholder
属性在文本框中显示占位符文本,aria-label
属性为屏幕阅读器提供了文本框的标签。框组前缀是一个包含input-group-text
类的span
元素,后者包含了标签@
。如果你想添加按钮而不是文本标签,你可以替换掉span
元素并使用button
元素,如下所示:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
在这个例子中,我们将输入框组后缀替换成了一个包含了button
元素的div
元素。btn
和btn-outline-secondary
类创建了一个带边框的按钮。如果需要输入框组中添加多个按钮,可以使用input-group-btn
、input-group-addon
类来创建两个附加按钮组件。
尺寸和变化
Bootstrap4提供了多种尺寸和样式的输入框组,开发人员可以根据需求调用。下面是一些最流行的变化:
input-group-lg
和input-group-sm
用于设置输入框组的尺寸input-group-text
类和form-control-plaintext
类可用于修改包含标签或文本的框组input-group-addon
类代替了input-group-text
类,可以以后还需要更多类input-group-vertical
类可用于创建垂直输入框组而不是水平输入框组- 调整边框弧度(
border-radius
)可以通过添加自定义边框类实现
表单支持
Bootstrap4的框架还提供了完善的表单支持,包括各种表单组件的样式(例如文本框、单选按钮、多选框等等)。在使用输入框组时,需要在输入框组外包裹一个表单元素。
<form>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
表单元素可以使accept-charset,action,autocomplete,enctype,method,name,novalidate,target属性以及一个表单控件的集合被封装成一个表单。可用于以下操作:
- 在一个表单中包含多个输入框组件以便一次发送表单
- 添加表单验证
- 调整提交按钮行为
- 发送到特定的服务器路径或打开发送数据的新页面
总结
输入框组是Bootstrap4框架中非常流行的组件,并提供了多种样式和配置选项。在使用输入框组时,需要包装在表单元素中,以便添加表单验证等操作。开发人员可以通过添加类来自定义输入框组,并使用Bootstrap4提供的其他表单组件一起使用。