Макет
Придавайте вашим формам любую структуру, используя различные размеры и пользовательские сетки.
Формы
Каждая группа полей формы должна находиться в элементе <form>. Bootstrap не предоставляет по умолчанию стиль для элемента <form>, но есть несколько мощных функций браузера, которые работают по умолчанию.
- Для знакомства с формами в браузере смотите документации по формам MDN с полным списком доступных атрибутов.
<button>внутри<form>по умолчаниюtype="submit", поэтому старайтесь быть конкретным и всегда включайтеtype.- Вы можете отключить каждый элемент формы в форме
<form>с помощью атрибутаdisabled.
Поскольку Bootstrap применяет display: block и width: 100% почти ко всем элементам управления формой, то формы по умолчанию будут располагаться вертикально. Дополнительные классы могут использоваться для изменения этого макета для каждой формы.
Утилиты
Утилиты отступов - это самый простой способ добавить некоторую структуру к формам. Они обеспечивают базовую группировку меток, элементов управления, необязательного текста формы и сообщений проверки форм. Для единообразия мы рекомендуем использовать margin-bottom и одно направление во всей форме.
Испрользуя <fieldset>, <div> или другие элементы создайте свои формы такими, как вам нравится.
<divclass="mb-3"><labelfor="formGroupExampleInput"class="form-label">Example label</label><inputtype="text"class="form-control"id="formGroupExampleInput"placeholder="Example input placeholder"></div><divclass="mb-3"><labelfor="formGroupExampleInput2"class="form-label">Another label</label><inputtype="text"class="form-control"id="formGroupExampleInput2"placeholder="Another input placeholder"></div>Сетка форм
Более сложные формы могут быть построены с использованием наших классов сетки. Используйте их для расположения форм, которые требуют множественных колонок, различной ширины и других дополнительных параметров выравнивания. Необходимо, чтобы переменная Sass $enable-grid-classes была включена (по умолчанию включена).
<divclass="row"><divclass="col"><inputtype="text"class="form-control"placeholder="First name"aria-label="First name"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Last name"aria-label="Last name"></div></div>Отступы
Добавляя классы модификаторов отступов, Вы можете контролировать ширину промежутков как в строчном, так и в блочном направлении. Также требуется, чтобы переменная Sass $enable-grid-classes (по умолчанию включена).
<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>С помощью системы сеток также можно создавать более сложные макеты.
<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> для того, чтобы они приобрели вертикальное центрирование относительно связанных с ними элементов контроля форм.
Временами вам может понадобиться классы марджина или паддинга, чтобы создать классное выравнивание. Например, мы удалили padding-top в наших вертикально расположенных лейблах ввода "радио", для лучшего выравнивания текста.
<form><divclass="row mb-3"><labelfor="inputEmail3"class="col-sm-2 col-form-label">Email</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">Password</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">Radios</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"> First radio </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios2"value="option2"><labelclass="form-check-label"for="gridRadios2"> Second radio </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"> Third disabled radio </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"> Example checkbox </label></div></div></div><buttontype="submit"class="btn btn-primary">Sign in</button></form>Размеры надписей горизонтальных форм
Обязательно используйте классы .col-form-label-sm или .col-form-label-lg в своих <label> для того, чтобы размеры шрифтов названия формы и вспомогательной надписи в пустой форме (т.н. placeholder) ввода совпадали.
<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 или .form-row. Такая верстка разделит доступную ширину поровну между колонками. Вы также можете создать субнабор колонок, которые займут либо меньше, либо больше места (как необходимо), в то время как колонки класса .col равномерно распределятся по оставшейся ширине, к примеру, как классы .col-7.
<divclass="row g-3"><divclass="col-sm-7"><inputtype="text"class="form-control"placeholder="City"aria-label="City"></div><divclass="col-sm"><inputtype="text"class="form-control"placeholder="State"aria-label="State"></div><divclass="col-sm"><inputtype="text"class="form-control"placeholder="Zip"aria-label="Zip"></div></div>Авторазмеры
В примере ниже для вертикального центрирования содержимого используются обычные инструменты флексбокса, также в нем использован класс .col вместо .col-auto - что заставляет колонки занять места лишь столько, сколько необходимо. Другими словами, размер столбца зависит от его содержимого.
<formclass="row gy-2 gx-3 align-items-center"><divclass="col-auto"><labelclass="visually-hidden"for="autoSizingInput">Name</label><inputtype="text"class="form-control"id="autoSizingInput"placeholder="Jane Doe"></div><divclass="col-auto"><labelclass="visually-hidden"for="autoSizingInputGroup">Username</label><divclass="input-group"><divclass="input-group-text">@</div><inputtype="text"class="form-control"id="autoSizingInputGroup"placeholder="Username"></div></div><divclass="col-auto"><labelclass="visually-hidden"for="autoSizingSelect">Preference</label><selectclass="form-select"id="autoSizingSelect"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="col-auto"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck"><labelclass="form-check-label"for="autoSizingCheck"> Remember me </label></div></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary">Submit</button></div></form>Вы можете заменить их опять на классы колонок определенного размера.
<formclass="row gx-3 gy-2 align-items-center"><divclass="col-sm-3"><labelclass="visually-hidden"for="specificSizeInputName">Name</label><inputtype="text"class="form-control"id="specificSizeInputName"placeholder="Jane Doe"></div><divclass="col-sm-3"><labelclass="visually-hidden"for="specificSizeInputGroupUsername">Username</label><divclass="input-group"><divclass="input-group-text">@</div><inputtype="text"class="form-control"id="specificSizeInputGroupUsername"placeholder="Username"></div></div><divclass="col-sm-3"><labelclass="visually-hidden"for="specificSizeSelect">Preference</label><selectclass="form-select"id="specificSizeSelect"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="col-auto"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck2"><labelclass="form-check-label"for="autoSizingCheck2"> Remember me </label></div></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary">Submit</button></div></form>Строчная форма
Используйте класс .col-auto для создания горизонтальных макетов. Добавив классы-модификаторы отступов мы получим отступы в горизонтальном и вертикальном направлениях. .align-items-center выравнивает элементы формы по центру, обеспечивая правильное выравнивание .form-checkbox.
<formclass="row row-cols-lg-auto g-3 align-items-center"><divclass="col-12"><labelclass="visually-hidden"for="inlineFormInputGroupUsername">Username</label><divclass="input-group"><divclass="input-group-text">@</div><inputtype="text"class="form-control"id="inlineFormInputGroupUsername"placeholder="Username"></div></div><divclass="col-12"><labelclass="visually-hidden"for="inlineFormSelectPref">Preference</label><selectclass="form-select"id="inlineFormSelectPref"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="col-12"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="inlineFormCheck"><labelclass="form-check-label"for="inlineFormCheck"> Remember me </label></div></div><divclass="col-12"><buttontype="submit"class="btn btn-primary">Submit</button></div></form>