Bootstrap Layout (макет)

Формы

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

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

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

Служебные программы

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

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

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Пример label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Еще один label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

Сетка форм

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

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="Имя" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Фамилия" aria-label="Last name">
  </div>
</div>

Gutters (отступы)

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

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="Имя" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Фамилия" aria-label="Last name">
  </div>
</div>

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

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Электронная почта</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Пароль</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Адрес</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Адрес 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">Город</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

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

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

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

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Электронная почта</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Вход</button>
</form>

Определение размера этикетки горизонтальной формы

Обязательно используйте .col-form-label-sm or .col-form-label-lg для вашего <label>s или <legend>s, чтобы правильно соблюдать размер .form-control-lg и .form-control-sm.

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Электронная почта</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Электронная почта</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Электронная почта</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

Размер столбцов

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

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

Автоматическое определение размера

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

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Имя</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Имя пользователя</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Настройки</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Запомнить меня
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Отправить</button>
  </div>
</form>

Затем вы можете переделать это еще раз с помощью классов столбцов, зависящих от размера.

<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Имя</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Джейн Доу">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Имя пользователя</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Имя пользователя">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Предпочтение</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Запомнить меня
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Отправить</button>
  </div>
</form>

Встроенные формы

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

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Имя пользователя</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Запомнить меня
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Отправить</button>
  </div>
</form>