logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间:
Upload 文件上传Affix 固钉
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Form 表单

当选项过多时,使用下拉菜单展示并选择内容。

基本用法

水平表单

水平表单将标签和输入字段水平排列。使用 .row 类和 .col-* 类来实现。

内联表单

内联表单将所有表单元素放在一行中。适用于简单的搜索表单或过滤器。

水平对齐的表单

使用自定义 .form-label-left 类来使标签左对齐,适用于更复杂的表单布局。

响应式的表单

使用 Bootstrap 的响应式类来调整表单在不同屏幕尺寸下的布局。

垂直表单

默认情况下,Bootstrap 表单是垂直排列的。可以使用 .form-group 类来增加间距。

表单验证

  • 验证类: 使用 is-invalid 和 is-valid 类来根据验证状态样式化表单控件。
  • 错误消息: 使用 invalid-feedback 类来显示错误消息。