Плавающие метки
Создавайте красивые простые метки для полей формы, плавающие над полями ввода.
Пример
Оберните пару элементов <input class="form-control"> и <label> в .form-floating, чтобы включить плавающие метки с полями текстовой формы Bootstrap. Для каждого placeholder требуется <input>, поскольку наш метод плавающих меток только для CSS использует псевдоэлемент :placeholder-shown. Также обратите внимание, что <input> должен идти первым, чтобы мы могли использовать связанный селектор (например ~).
<divclass="form-floating mb-3"><inputtype="email"class="form-control"id="floatingInput"placeholder="name@example.com"><labelfor="floatingInput">Email address</label></div><divclass="form-floating"><inputtype="password"class="form-control"id="floatingPassword"placeholder="Password"><labelfor="floatingPassword">Password</label></div>Когда value уже определено <label> автоматически подстраивается под свое плавающее положение.
<formclass="form-floating"><inputtype="email"class="form-control"id="floatingInputValue"placeholder="name@example.com"value="test@example.com"><labelfor="floatingInputValue">Input with value</label></form>Стили проверки формы также работают аналогичным образом.
<formclass="form-floating"><inputtype="email"class="form-control is-invalid"id="floatingInputInvalid"placeholder="name@example.com"value="test@example.com"><labelfor="floatingInputInvalid">Invalid input</label></form>Текстовые области
По умолчанию многострочное текстовое поле <textarea> с .form-control будет той же высоты, что и <input>.
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea"></textarea><labelfor="floatingTextarea">Comments</label></div>To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea2"style="height: 100px"></textarea><labelfor="floatingTextarea2">Comments</label></div>Элемент выбора
Помимо .form-control плавающие метки доступны только для .form-select. Они работают также, но в отличие от <input> они всегда показывают <label> в плавающем состоянии.
<divclass="form-floating"><selectclass="form-select"id="floatingSelect"aria-label="Floating label select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelfor="floatingSelect">Works with selects</label></div>Макет
При работе с сеткой Bootstrap обязательно размещайте элементы формы в классах столбцах.
<divclass="row g-2"><divclass="col-md"><divclass="form-floating"><inputtype="email"class="form-control"id="floatingInputGrid"placeholder="name@example.com"value="mdo@example.com"><labelfor="floatingInputGrid">Email address</label></div></div><divclass="col-md"><divclass="form-floating"><selectclass="form-select"id="floatingSelectGrid"aria-label="Floating label select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelfor="floatingSelectGrid">Works with selects</label></div></div></div>Sass
Переменные
$form-floating-height:add(3.5rem,$input-height-border);$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.1sease-in-out,transform.1sease-in-out;