Макет

Придавайте вашим формам любую структуру, используя различные размеры и пользовательские сетки.

vash-ugol.ru

Купить квартиру в Москве. Профессиональный подход

На этой странице

shinomontazhpro.ru

Шиномонтаж в Москве. Быстро и качественно!

Профессиональные услуги шиномонтажа. Опытные мастера. Гарантия. Звоните!

Формы

Каждая группа полей формы должна находиться в элементе <form>. Bootstrap не предоставляет стили по умолчанию для элемента <form>, но есть несколько мощных функций браузера, которые предоставляются по умолчанию.

Новичок в формах браузера? Рассмотрите возможность просмотра документов формы MDN для обзора и полного списка доступных атрибутов.
<button> внутри <form> по умолчанию type="submit", поэтому старайтесь быть конкретным и всегда включайте type.

Поскольку Bootstrap применяет display: block и width: 100% почти ко всем элементам управления формой, формы по умолчанию будут располагаться вертикально. Дополнительные классы могут использоваться для изменения этого макета для каждой формы.

Утилиты

Утилиты полей и отступов - это самый простой способ добавить некоторую структуру к формам. Они обеспечивают базовую группировку меток, элементов управления, необязательного текста формы и сообщений проверки форм. Для единообразия мы рекомендуем использовать margin-bottom и одно направление во всей форме.

Испрользуя <fieldset>, <div> или другие элементы создайте свои формы такими, как вам нравится.

Пример метки

Другая метка

html

<divclass="mb-3"><labelfor="formGroupExampleInput"class="form-label">Пример метки</label><inputtype="text"class="form-control"id="formGroupExampleInput"placeholder="Пример подсказки поля ввода"></div><divclass="mb-3"><labelfor="formGroupExampleInput2"class="form-label">Другая метка</label><inputtype="text"class="form-control"id="formGroupExampleInput2"placeholder="Другая подсказка поля ввода"></div>

Сетка форм

Более сложные формы могут быть построены с использованием наших классов сетки. Используйте их для макетов форм, требующих нескольких столбцов, разной ширины и дополнительных параметров выравнивания. Требует включения переменной Sass $enable-grid-classes (по умолчанию включено).

html

<divclass="row"><divclass="col"><inputtype="text"class="form-control"placeholder="Имя"aria-label="Имя"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Фамилия"aria-label="Фамилия"></div></div>

Отступы

Добавляя классы модификаторов отступов, Вы можете контролировать ширину промежутков как в строчном, так и в блочном направлении. Также требуется, чтобы переменная Sass $enable-grid-classes (по умолчанию включена).

html

<divclass="row g-3"><divclass="col"><inputtype="text"class="form-control"placeholder="Имя"aria-label="Имя"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Фамилия"aria-label="Фамилия"></div></div>

С помощью системы сеток также можно создавать более сложные макеты.

html

<formclass="row g-3"><divclass="col-md-6"><labelfor="inputEmail4"class="form-label">Эл. адрес</label><inputtype="email"class="form-control"id="inputEmail4"></div><divclass="col-md-6"><labelfor="inputPassword4"class="form-label">Пароль</label><inputtype="password"class="form-control"id="inputPassword4"></div><divclass="col-12"><labelfor="inputAddress"class="form-label">Адрес</label><inputtype="text"class="form-control"id="inputAddress"placeholder="Проспект Ленина"></div><divclass="col-12"><labelfor="inputAddress2"class="form-label">Адрес 2</label><inputtype="text"class="form-control"id="inputAddress2"placeholder="Квартира"></div><divclass="col-md-6"><labelfor="inputCity"class="form-label">Город</label><inputtype="text"class="form-control"id="inputCity"placeholder="Брянск"></div><divclass="col-md-4"><labelfor="inputState"class="form-label">Область</label><selectid="inputState"class="form-select"><optionselected>Выберите...</option><option>...</option></select></div><divclass="col-md-2"><labelfor="inputZip"class="form-label">Индекс</label><inputtype="text"class="form-control"id="inputZip"></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="gridCheck"><labelclass="form-check-label"for="gridCheck"> Проверить меня </label></div></div><divclass="col-12"><buttontype="submit"class="btn btn-primary">Войти в систему</button></div></form>

Горизонтальные формы

Создавайте горизонтальные формы с сеткой, добавляя класс .row для формирования групп и используя классы .col-*-* для определения ширины Ваших меток и элементов управления. Не забудьте добавить .col-form-label к Вашим <label> чтобы они были выровнены по центру по вертикали с соответствующими элементами управления формой.

Иногда Вам может потребоваться использовать утилиты margin или padding для создания идеального выравнивания, которое Вам нужно. Например, мы удалили padding-top на нашей метке сгруппированных радио, чтобы лучше выровнять базовую линию текста.

html

<form><divclass="row mb-3"><labelfor="inputEmail3"class="col-sm-2 col-form-label">Эл. почта</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"></div></div><divclass="row mb-3"><labelfor="inputPassword3"class="col-sm-2 col-form-label">Пароль</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"></div></div><fieldsetclass="row mb-3"><legendclass="col-form-label col-sm-2 pt-0">Радио кнопки</legend><divclass="col-sm-10"><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios1"value="option1"checked><labelclass="form-check-label"for="gridRadios1"> Первая радио кнопка
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios2"value="option2"><labelclass="form-check-label"for="gridRadios2"> Вторая радио кнопка
</label></div><divclass="form-check disabled"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios3"value="option3"disabled><labelclass="form-check-label"for="gridRadios3"> Третья отключенная радио кнопка
</label></div></div></fieldset><divclass="row mb-3"><divclass="col-sm-10 offset-sm-2"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="gridCheck1"><labelclass="form-check-label"for="gridCheck1"> Пример флажка
</label></div></div></div><buttontype="submit"class="btn btn-primary">Войти</button></form>

Размеры надписей горизонтальных форм

Обязательно используйте классы .col-form-label-sm или .col-form-label-lg в своих <label> для того, чтобы размеры шрифтов названия формы и вспомогательной надписи в пустой форме (т.н. placeholder) ввода совпадали.

html

<divclass="row mb-3"><labelfor="colFormLabelSm"class="col-sm-2 col-form-label col-form-label-sm">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control form-control-sm"id="colFormLabelSm"placeholder="col-form-label-sm"></div></div><divclass="row mb-3"><labelfor="colFormLabel"class="col-sm-2 col-form-label">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="colFormLabel"placeholder="col-form-label"></div></div><divclass="row"><labelfor="colFormLabelLg"class="col-sm-2 col-form-label col-form-label-lg">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control form-control-lg"id="colFormLabelLg"placeholder="col-form-label-lg"></div></div>

Размеры колонок

Как показано в предыдущих примерах, наша сеточная система позволяет Вам размещать любое количество .col внутри .row. Они разделят доступную ширину между собой поровну. Вы также можете выбрать подмножество Ваших столбцов, чтобы они занимали больше или меньше места, в то время как оставшиеся .col поровну разделяют остальные, с определенными классами столбцов, такими как .col-sm-7.

html

<divclass="row g-3"><divclass="col-sm-7"><inputtype="text"class="form-control"placeholder="Город"aria-label="Город"></div><divclass="col-sm"><inputtype="text"class="form-control"placeholder="Область"aria-label="Область"></div><divclass="col-sm"><inputtype="text"class="form-control"placeholder="Индекс"aria-label="Индекс"></div></div>

Авторазмеры

В приведенном ниже примере используется утилита flexbox для вертикального центрирования содержимого и изменение .col на .col-auto, чтобы Ваши столбцы занимали ровно столько места, сколько необходимо. Другими словами, размер столбца зависит от содержимого.

html

<formclass="row gy-2 gx-3 align-items-center"><divclass="col-auto"><labelclass="visually-hidden"for="autoSizingInput">Имя</label><inputtype="text"class="form-control"id="autoSizingInput"placeholder="Иван Иванов"></div><divclass="col-auto"><labelclass="visually-hidden"for="autoSizingInputGroup">Имя пользователя</label><divclass="input-group"><divclass="input-group-text">@</div><inputtype="text"class="form-control"id="autoSizingInputGroup"placeholder="Имя пользователя"></div></div><divclass="col-auto"><labelclass="visually-hidden"for="autoSizingSelect">Предпочтение</label><selectclass="form-select"id="autoSizingSelect"><optionselected>Выберите...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="col-auto"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck"><labelclass="form-check-label"for="autoSizingCheck"> Запомнить меня
</label></div></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary">Отправить</button></div></form>

Затем Вы можете снова смешать это с классами столбцов, зависящими от размера.

html

<formclass="row gx-3 gy-2 align-items-center"><divclass="col-sm-3"><labelclass="visually-hidden"for="specificSizeInputName">Имя</label><inputtype="text"class="form-control"id="specificSizeInputName"placeholder="Иван Иванов"></div><divclass="col-sm-3"><labelclass="visually-hidden"for="specificSizeInputGroupUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-text">@</div><inputtype="text"class="form-control"id="specificSizeInputGroupUsername"placeholder="Имя пользователя"></div></div><divclass="col-sm-3"><labelclass="visually-hidden"for="specificSizeSelect">Предпочтение</label><selectclass="form-select"id="specificSizeSelect"><optionselected>Выберите...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="col-auto"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck2"><labelclass="form-check-label"for="autoSizingCheck2"> Запомнить меня
</label></div></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary">Отправить</button></div></form>

Строчная форма

Используйте классы .row-cols-* для создания адаптивных горизонтальных макетов. Добавив классы модификаторов промежутков, мы получим промежутки в горизонтальном и вертикальном направлениях. В узких мобильных окнах просмотра .col-12 помогает складывать элементы управления формы и многое другое. .align-items-center выравнивает элементы формы по центру, обеспечивая правильное выравнивание .form-checkbox.

html

<formclass="row row-cols-lg-auto g-3 align-items-center"><divclass="col-12"><labelclass="visually-hidden"for="inlineFormInputGroupUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-text">@</div><inputtype="text"class="form-control"id="inlineFormInputGroupUsername"placeholder="Имя пользователя"></div></div><divclass="col-12"><labelclass="visually-hidden"for="inlineFormSelectPref">Предпочтение</label><selectclass="form-select"id="inlineFormSelectPref"><optionselected>Выберите...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="inlineFormCheck"><labelclass="form-check-label"for="inlineFormCheck"> Запомнить меня
</label></div></div><divclass="col-12"><buttontype="submit"class="btn btn-primary">Отправить</button></div></form>