Группы ввода Bootstrap 5

Группа ввода

.input-group Класс является контейнером, который усиливает ввод данных, добавляя иконки, текст или кнопки перед или после поля ввода в качестве "текст-подсказки".

Чтобы установить стиль для указанного текста-подсказки, пожалуйста, используйте класс .input-group-text Класс:

Пример

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Имя пользователя">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Ваш email">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Попробуйте сами

Размер группы ввода

Пожалуйста, установите .input-group-sm Класс для маленьких групп ввода, будет .input-group-lg Для больших групп ввода:

Пример

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Маленький</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">По умолчанию</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Большой</span>
  <input type="text" class="form-control">
</div>

Попробуйте сами

Множество ввода и помощников

Добавьте несколько контролей ввода или плагинов:

Пример

<!-- Множество контролей ввода -->
<div class="input-group mb-3">
  <span class="input-group-text">Имя</span>
  <input type="text" class="form-control" placeholder="Фамилия">
  <input type="text" class="form-control" placeholder="Имя">
</div>
<!-- Множество плагинов/текстов помощи -->
<div class="input-group mb-3">
  <span class="input-group-text">Один</span>
  <span class="input-group-text">Два</span>
  <span class="input-group-text">Три</span>
  <input type="text" class="form-control">
</div>

Попробуйте сами

Группа ввода с флажками и радиокнопками

Вы также можете использовать флажки или радиокнопки вместо текста:

Пример

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Некоторый текст">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Некоторый текст">
</div>

Попробуйте сами

Группа ввода кнопок

Пример

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Основной кнопка</button>
  <input type="text" class="form-control" placeholder="Некоторый текст">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Поиск">
  <button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Некоторый текст">
  <button class="btn btn-primary" type="button">ОК</button>
  <button class="btn btn-danger" type="button">Отмена</button>
</div>

Попробуйте сами

Группа ввода с кнопкой прокрутки

Добавьте кнопку прокрутки в группу ввода. Обратите внимание, что вам не нужно использовать обычный контейнер .dropdown.

Пример

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Кнопка прокрутки
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Ссылка 1</a></li>
    <li><a class="dropdown-item" href="#">Ссылка 2</a></li>
    <li><a class="dropdown-item" href="#">Ссылка 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Имя пользователя">
</div>

Попробуйте сами