Группа ввода

Группы ввода позволяют комбинировать поля формы и текст в одной строке. Они похожи на группы кнопок в том смысле, что позволяют выстраивать элементы вплотную друг к другу.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до доллара)" aria-describedby="basic-addon"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon">.00</span> </div> </div>

Для создания группы ввода используйте класс .input-group. Чтобы присоединить элемент к полю формы, используйте <span> с классом .input-group-text, вложенным в <div> с классом .input-group-append.

Обратите внимание, что группы ввода предназначены только для текстовых элементов <input>.

Текст с двух сторон

Вы также можете использовать .input-group-prepend, чтобы присоединить элемент перед полем формы. На деле у вас может быть текст с двух сторон поля.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до доллара)" aria-describedby="basic-addon"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon">.00</span> </div> </div>

Размер

Используйте .input-group-sm или .input-group-lg для группы, чтобы указать размер всех элементов. Нет необходимости указывать размер для каждого элемента в группе.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до доллара)" aria-describedby="basic-addon"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Medium</span> </div> <input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до доллара)" aria-describedby="basic-addon"> </div> <div class="input-group input-group-lg mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до доллара)" aria-describedby="basic-addon"> </div>

Переключатели и флажки

Вы можете установить переключатели и флажки вместо текста.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox" aria-label="Флажок для следующего введённого текста"> </div> </div> <input type="text" class="form-control" aria-label="Текстовое поле с флажком"> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" aria-label="Переключатель для следующего введённого текста"> </div> </div> <input type="text" class="form-control" aria-label="Текстовое поле с переключателем"> </div>

Кнопки

Вы также можете добавить кнопки к полю формы вместо текста.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Введите поисковый запрос" aria-label="Поисковый запрос" aria-describedby="basic-addon"> <div class="input-group-append"> <button class="btn btn-secondary" type="button">Поиск!</button> </div> </div>

Выпадающее меню

Вы можете добавить выпадающие меню к группе ввода.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="input-group"> <input type="text" class="form-control" aria-label="Текстовое поле с кнопкой выпадающего меню"> <div class="input-group-append"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Меню</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Действие</a> <a class="dropdown-item" href="#">Ещё одно</a> <a class="dropdown-item" href="#">Что-то ещё</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Отдельная ссылка</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Выпадающее меню с разделённой зоной

Вы также можете добавить к группе ввода выпадающее меню с разделённой зоной.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="input-group"> <input type="text" class="form-control" aria-label="Текстовое поле с сегментированной кнопкой выпадающего меню"> <div class="input-group-append"> <button type="button" class="btn btn-outline-secondary">Меню</button> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Действие</a> <a class="dropdown-item" href="#">Ещё одно</a> <a class="dropdown-item" href="#">Что-то ещё</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Отдельная ссылка</a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты