Bootstrap - Группы ввода: Доброжелательное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Я рад быть вашим проводником в этом захватывающем путешествии по Группам ввода Bootstrap. Как alguien, кто teaches computer science на протяжении многих лет, я видел, как countless students зажигаются, когда они постигают эти концепции. Так что давайте окунемся и сделаем ваши веб-формы потрясающими!

Bootstrap - Input Groups

Что такое Группы ввода?

Прежде чем мы начнем, представьте, что вы проектируете форму для службы доставки пиццы. Вам нужны поля для имени клиента, адреса и, конечно же, для важной пиццы. Группы ввода resemble secret sauce, который делает эти элементы формы look cohesive и профессионально.

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

Пример: Основная группа ввода

Давайте начнем с простого примера:

<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Имя пользователя">
</div>

В этом коде:

Мы создаем контейнер с классом input-group.
Класс mb-3 добавляет немного отступа снизу.
Мы используем input-group-text для префикса '@'.
Поле ввода использует класс form-control для стилизации.

Это создает стильное поле ввода с символом '@', идеальное для ввода имен пользователей или адресов электронной почты!

Огибание

Иногда ваши группы ввода могут быть слишком длинными для одной строки. Не волнуйтесь; Bootstrap позаботится о вас с автоматическим огибанием.

Пример: Группа ввода с огибанием

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

Здесь мы добавляем flex-nowrap к группе ввода. Это обеспечивает то, что все элементы remain на одной строке, если возможно, но будут хорошо огибаться, если экран слишком узкий.

Масштабирование

Как и в случае с Goldilocks, иногда вам нужны группы ввода exact размера. Bootstrap предлагает различные параметры масштабирования для удовлетворения ваших потребностей.

Пример: Группы ввода разного размера

<div class="input-group input-group-sm mb-3">
<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 input-group-lg">
<span class="input-group-text">Большая</span>
<input type="text" class="form-control">
</div>

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

Флажки и радиокнопки

Иногда простого текстового поля недостаточно. Вы можете добавить флажки или радиокнопки к своим группам ввода. Давайте посмотрим, как это можно сделать!

Пример: Флажок в группе ввода

<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control" placeholder="Флажок здесь">
</div>

В этом примере мы вкладываем флажок внутрь input-group-text div. Класс form-check-input стилизует наш флажок, а mt-0 удаляет верхний отступ.

Множественные поля ввода

Зачем довольствоваться одним полем ввода, если можно иметь несколько? Давайте создадим группу ввода с несколькими полями.

Пример: Множественные поля ввода

<div class="input-group">
<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">
<input type="text" class="form-control" placeholder="Имя получателя">
<button class="btn btn-outline-secondary" type="button">Кнопка</button>
</div>

Здесь мы добавляем кнопку рядом с полем ввода. Это можно использовать для действий, таких как отправка формы или Initiating a search.

Кнопки с выпадающими списками

Хотите дать вашим пользователям больше возможностей? Давайте добавим выпадающий список к нашей кнопке дополнения.

Пример: Кнопка с выпадающим списком

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Поиск...">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Опции
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><a class="dropdown-item" href="#">Еще что-то здесь</a></li>
</ul>
</div>

Это создает кнопку с выпадающим списком рядом с полем ввода, предлагая дополнительные возможности пользователю.

Пользовательские формы

Bootstrap также позволяет создавать пользовательские элементы формы внутри групп ввода. Давайте рассмотрим пример пользовательского select.

Пример: Пользовательский select

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Опции</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Выберите...</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>
</div>

Это создает пользовательский выпадающий список внутри нашей группы ввода, стилизованный consistently с другими элементами Bootstrap.

Пользовательский файловый ввод

Last but not least, давайте посмотрим, как создать пользовательский файловый ввод внутри группы ввода.

Пример: Пользовательский файловый ввод

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">Загрузка</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>

Это создает стильное поле для загрузки файлов, идеально подходящее для allowing users к загрузке файлов через вашу форму.

Заключение

И вот мы добрались до конца,folks! Мы traveled через мир Групп ввода Bootstrap, от простых примеров до более сложных конфигураций. Помните, ключ к овладению этими концепциями - это практика. Попробуйте combining different элементы, поиграйте с размерами и стилями, и, что самое главное, наслаждайтесь этим!

Заканчивая, я вспомнил, как один из студентов однажды сказал мне: "Bootstrap - это как LEGO для веб-дизайна!" И вы знаете что? Он был absolutely прав. У вас есть все эти замечательные детали الآن - пришло время build что-то потрясающее!

Счастливого кодирования, и пусть ваши формы всегда будут удобными и визуально привлекательными!

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Діапазон

Следующий учебник:

Bootstrap - Плавающие метки