创建浮动在输入字段上的精美简单的表单标签。
将一对 <input class="form-control">
和 <label>
元素包裹在 .form-floating
中,以使用 Bootstrap 的文本表单字段启用浮动标签。每个 <input>
都需要一个占位符,因为我们的纯 CSS 浮动标签方法使用 :placeholder-shown
伪元素。另请注意,<input>
必须先出现,以便我们可以使用同级选择器(例如 ~)。
<div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">邮箱地址</label> </div> <div class="form-floating"> <input type="password" class="form-control" id="floatingPassword" placeholder="密码"> <label for="floatingPassword">密码</label> </div>
当已经定义了一个值时,<label>
s 会自动调整到它们的浮动位置。
<form class="form-floating"> <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com"> <label for="floatingInputValue">有值的输入框</label> </form>
表单验证样式也可以按预期工作。
<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">验证输入框</label> </form>
默认情况下,带有 .form-control
的 <textarea>
将与 <input>
具有相同的高度。
<div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea> <label for="floatingTextarea">留言</label> </div>
要在 <textarea> 上设置自定义高度,请不要使用 rows 属性。相反,设置一个明确的高度(内联或通过自定义 CSS)。
<div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea> <label for="floatingTextarea2">留言</label> </div>
除了 .form-control
,浮动标签仅在 .form-selects
上可用。它们的工作方式相同,但与 <input>
不同的是,它们总是将 <label>
显示为浮动状态。不支持带有大小和多个的选择。
<div class="form-floating"> <select class="form-select" id="floatingSelect" aria-label="浮动标签选择示例"> <option selected>打开这个选择菜单</option> <option value="1">鹤林玉露</option> <option value="2">鸿猷录</option> <option value="3">三侠剑</option> </select> <label for="floatingSelect">与下拉选择一起工作</label> </div>
使用 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">邮箱地址</label> </div> </div> <div class="col-md"> <div class="form-floating"> <select class="form-select" id="floatingSelectGrid"> <option selected>打开这个选择菜单</option> <option value="1">三刻拍案惊奇</option> <option value="2">三十六计</option> <option value="3">两兄弟</option> </select> <label for="floatingSelectGrid">与下拉选择一起工作</label> </div> </div> </div>