SuperAPI AI 工具集

bootstrap-forms

前端与建站

查看项目

更新于 10-16 02:25

技能介绍

本技能面向 Bootstrap 5.3 表单相关开发,当用户询问 Bootstrap 表单、表单控件、输入字段、select、复选框等内容时使用。Bootstrap 提供完整的表单样式,包括控件、布局、校验状态和输入组。

一、表单控件 文本输入使用 .form-control 配合 .form-label 与 .mb-3 组织。尺寸方面,.form-control-lg 适合首屏或主要行动按钮,.form-control-sm 适合工具栏或内联表单等紧凑界面。禁用字段使用 disabled,只读字段使用 readonly;若希望值可见可选但无表单样式,可用 .form-control-plaintext 配合 readonly。文件输入使用 type="file",加 multiple 支持多文件。颜色选择器使用 type="color" 配合 .form-control-color。文本域使用 textarea 配合 .form-control 与 rows。

二、帮助文本与无障碍 帮助文本使用 .form-text,并通过 aria-describedby 与输入关联,便于屏幕阅读器在聚焦时朗读。当输入同时有帮助文本和校验反馈时,在 aria-describedby 中同时引用两者,并设置 aria-invalid。

三、Select 与 Datalist 下拉选择使用 .form-select,支持 multiple 多选、.form-select-lg/.form-select-sm 尺寸,以及 size 属性控制可见选项数量(与改变视觉比例的尺寸类不同)。Datalist 为文本输入提供自动补全建议,通过 list 属性与 datalist 的 id 关联;用户可自由输入或选择建议,其下拉外观为浏览器原生,无法自定义。

四、复选框、单选、开关与切换按钮 复选框与单选使用 .form-check、.form-check-input、.form-check-label。不确定状态需通过 JavaScript 设置 indeterminate,无对应 HTML 属性。开关使用 .form-check.form-switch,适合即时生效的开关设置;iOS 17.4+ Safari 可加 switch 属性启用原生触觉反馈。内联使用 .form-check-inline,反向布局使用 .form-check-reverse。切换按钮使用 .btn-check 配合标签上的 .btn 类,保持复选框/单选语义,适合分段控件、筛选开关和选项选择器;可用 .btn-outline-* 实现描边样式。屏幕阅读器会将其朗读为“已选中/未选中”。

五、范围滑块 范围输入使用 .form-range,支持 min、max、step。可用 output 元素配合 JavaScript 的 oninput 实时显示当前值。

六、输入组 输入组用于将相关元素与表单控件视觉关联,如货币符号、单位或操作按钮。支持基本文本附加、按钮、下拉、尺寸类。默认通过 flex-wrap: wrap 换行,加 .flex-nowrap 可保持单行。已知限制:首位或末位使用 .d-none 或 display: none 的隐藏元素会破坏相邻元素的圆角样式,可将隐藏元素移出输入组或改用可见性工具类。分段下拉按钮使用 .dropdown-toggle-split。

七、浮动标签 浮动标签适合登录或注册等简单表单,标签在聚焦时动画进入输入框;当需要帮助文本或复杂校验消息时不宜使用。与输入组和校验组合时,需将 .form-floating 放入 .input-group,给输入组加 .has-validation,并把校验反馈放在 .form-floating 外、.input-group 内,以保证圆角样式正确。

八、表单布局 垂直布局为默认,适合大多数表单和移动端,标签堆叠在输入上方。水平布局适合宽度充足、希望更紧凑的设置页面等场景。

关于收费、价格、平台支持与具体效果等事实,资料中暂未提供。