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网格系统时，请确保将表单元素放置在列类中。

OutUI

OutUI

Float Labels 浮动标签

示例

Textarea 文本域

Select 下拉框

Readonly 只读文本

Input groups 输入组

Layout 布局

Float Labels 浮动标签

示例

Textarea 文本域

Select 下拉框

Readonly 只读文本

Input groups 输入组

Layout 布局