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