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 头像
最后更新时间:
Input group 输入组ColorPicker 颜色选择器
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Float Labels 浮动标签

表单标签漂浮在输入字段上方

示例

在 .form-floating 中包装一对 <input class="form-control"> 和 <label> 元素,以使用 Bootstrap 的文本表单字段启用浮动标签。由于 CSS-only 浮动标签的方法使用 :placeholder-shown 伪元素,因此在每个 <input> 上都需要一个placeholder。还要注意 <input> 必须放在第一位,这样就可以使用同级选择器(例如,~)。

如果已经定义了value, 则<label>将自动调整到浮动位置。

表单验证样式也按预期工作。

Textarea 文本域

默认情况下,<textarea> 的 .form-control 的高度与<input>的高度相同。

要在 <textarea> 自定义高度,请不要使用rows属性。而是设置一个显式 height(内联或通过自定义CSS)。

Select 下拉框

除.form-control外,浮动标签仅在.form-select上可用。它们的工作方式相同,但与<input>不同,它们总是以浮动状态显示<label>。

Readonly 只读文本

使用 .form-control-plaintext, 能够帮助可编辑的输入框 <input> 切换成文本,从而做到不影响布局.

Input groups 输入组

浮动标签也支持 .input-group.

当.input-group 与 .form-floating 与表单验证一起使用时,应将 -feedback放在 .form-floating之外,但要在.input-group里面

Layout 布局

使用Bootstrap网格系统时,请确保将表单元素放置在列类中。