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