Плавающие метки
Создавайте красивые простые метки для полей формы, плавающие над полями ввода.
Пример
Оберните пару элементов <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">Адрес электронной почты</label></div><divclass="form-floating"><inputtype="password"class="form-control"id="floatingPassword"placeholder="Пароль"><labelfor="floatingPassword">Пароль</label></div>Когда уже определено значение value, <label> автоматически подстраиваются под свое плавающее положение.
<formclass="form-floating"><inputtype="email"class="form-control"id="floatingInputValue"placeholder="name@example.com"value="test@example.com"><labelfor="floatingInputValue">Ввод со значением</label></form>Стили проверки формы также работают должным образом.
<formclass="form-floating"><inputtype="email"class="form-control is-invalid"id="floatingInputInvalid"placeholder="name@example.com"value="test@example.com"><labelfor="floatingInputInvalid">Неверный Ввод</label></form>Текстовые области
По умолчанию, <textarea> с .form-control будет той же высоты, что и <input>.
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea"></textarea><labelfor="floatingTextarea">Комментарии</label></div>Чтобы установить произвольную высоту для Вашего <textarea>, не используйте атрибут rows. Вместо этого установите явную height (встроенную или через собственный CSS).
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea2"style="height: 100px"></textarea><labelfor="floatingTextarea2">Комментарии</label></div>Элемент выбора
За исключением .form-control, плавающие метки доступны только для .form-select. Они работают таким же образом, но в отличие от <input>, они всегда будут показывать <label> в плавающем состоянии. Выборки с size и multiple не поддерживаются.
<divclass="form-floating"><selectclass="form-select"id="floatingSelect"aria-label="Floating label select example"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><labelfor="floatingSelect">Работает с элементом выбора</label></div>Отключенные
Добавьте логический атрибут disabled для ввода, текстовой области или выбора, чтобы придать ему серый вид, удалить события указателя и предотвратить фокусировку.
<divclass="form-floating mb-3"><inputtype="email"class="form-control"id="floatingInputDisabled"placeholder="name@example.com"disabled><labelfor="floatingInputDisabled">Адрес эл. почты</label></div><divclass="form-floating mb-3"><textareaclass="form-control"placeholder="Оставьте комментарий здесь"id="floatingTextareaDisabled"disabled></textarea><labelfor="floatingTextareaDisabled">Комментарии</label></div><divclass="form-floating mb-3"><textareaclass="form-control"placeholder="Оставьте комментарий здесь"id="floatingTextarea2Disabled"style="height: 100px"disabled></textarea><labelfor="floatingTextarea2Disabled">Комментарии</label></div><divclass="form-floating"><selectclass="form-select"id="floatingSelectDisabled"aria-label="Плавающая метка отключена, выберите пример"disabled><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><labelfor="floatingSelectDisabled">Работает с меню выбора</label></div>Открытый текст только для чтения
Плавающие метки также поддерживают .form-control-plaintext, который может быть полезен для переключения с редактируемого <input> на значение открытого текста, не влияя на макет страницы.
<divclass="form-floating mb-3"><inputtype="email"readonlyclass="form-control-plaintext"id="floatingEmptyPlaintextInput"placeholder="name@example.com"><labelfor="floatingEmptyPlaintextInput">Пустой ввод</label></div><divclass="form-floating mb-3"><inputtype="email"readonlyclass="form-control-plaintext"id="floatingPlaintextInput"placeholder="name@example.com"value="name@example.com"><labelfor="floatingPlaintextInput">Ввод со значением</label></div>Группы ввода
Плавающие метки также поддерживают .input-group.
<divclass="input-group mb-3"><spanclass="input-group-text">@</span><divclass="form-floating"><inputtype="text"class="form-control"id="floatingInputGroup1"placeholder="Имя пользователя"><labelfor="floatingInputGroup1">Имя пользователя</label></div></div>При использовании .input-group и .form-floating вместе с проверкой формы, -feedback должен быть размещен вне .form-floating, но внутри .input-group. Это означает, что обратную связь нужно будет отображать с помощью javascript.
<divclass="input-group has-validation"><spanclass="input-group-text">@</span><divclass="form-floating is-invalid"><inputtype="text"class="form-control is-invalid"id="floatingInputGroup2"placeholder="Имя пользователя"required><labelfor="floatingInputGroup2">Имя пользователя</label></div><divclass="invalid-feedback"> Пожалуйста, выберите имя пользователя.
</div></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">Адрес электронной почты</label></div></div><divclass="col-md"><divclass="form-floating"><selectclass="form-select"id="floatingSelectGrid"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><labelfor="floatingSelect">Работает с элементом выбора</label></div></div></div>CSS
Sass переменные
$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-height:1.5em;$form-floating-label-opacity:.65;$form-floating-label-transform:scale(.85)translateY(-.5rem)translateX(.15rem);$form-floating-label-disabled-color:$gray-600;$form-floating-transition:opacity.1sease-in-out,transform.1sease-in-out;