Skip to main content Skip to docs navigation
View on GitHub

Floating labels浮动标签

Create beautifully simple form labels that float over your input fields.创建漂亮简单的表单标签，这些标签漂浮在输入字段上。

On this page本页内容

Example例子

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. 将一对<input class="form-control">元素和<label>元素包装在.form-floating中，以启用使用Bootstrap的文本表单字段的浮动标签。A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. 每个<input>上都需要一个placeholder，因为我们的只用CSS浮动标签的方法使用了:placeholder-shown伪元素。Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).还请注意<input>必须在前面，以便我们可以使用同级选择器（例如~）。

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>

When there’s a value already defined, <label>s will automatically adjust to their floated position.当已经定义了一个value时，<label>将自动调整到其浮动位置。

<form class="form-floating">
<input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
<label for="floatingInputValue">Input with value</label>
</form>

Form validation styles also work as expected.表单验证样式也可以按预期工作。

<form class="form-floating">
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
<label for="floatingInputInvalid">Invalid input</label>
</form>

Textareas文本区域

By default, <textarea>s with .form-control will be the same height as <input>s.默认情况下，带有.form-control类的<textarea>，其高度将与<input>的高度相同。

<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>

To set a custom height on your <textarea>, do not use the rows attribute. 要想在<textarea>上设置定义高度，请不要使用rows。Instead, set an explicit height (either inline or via custom CSS).而要设置显式的height（无论是在内联样式中设置，还是通过自定义CSS设置）。

<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>

Selects

Other than .form-control, floating labels are only available on .form-selects. 除.form-control外，浮动标签仅在.form-select上可用。They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state. 它们的工作方式相同，但不同于<input>、 他们将始终将<label>显示为处于浮动状态。Selects with size and multiple are not supported.带有size和multiple的<select>不受支持。

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>

Layout布局

When working with the Bootstrap grid system, be sure to place form elements within column classes.使用Bootstrap网格系统时，请确保将表单元素放置在列类中。

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>

Sass

Variables变量

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;