Как использовать группу ввода в Bootstrap 5?

<

div itemprop=»articleBody»>

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

Учебное пособие по группе ввода Bootstrap 5

Это руководство содержит следующие темы:

  1. Группа ввода текста
  2. Использование вариантов в группе ввода текста
  3. Группа ввода кнопок
  4. Выпадающая группа ввода
  5. Сегментированный раскрывающийся список
  6. Использование флажка
  7. Вставка радиокнопки
  8. Большая группа ввода

1. Группа ввода текста

Сначала давайте сгруппируем простые текстовые элементы с тегом , как показано ниже:

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Enter Twitter Username" aria-describedby="twitter">
</div>

В приведенном выше коде текстовое поле создается с помощью класса «.form-control». Дополнительный класс «.input-group-addon» используется для добавления текстового содержимого слева, а полный код помещается в

<

div> с классом «.input-group».

Результат в браузере будет выглядеть, как показано ниже:

Группа ввода текста

2. Варианты в группе ввода текста

Из приведенного выше базового примера возможно множество вариаций. Покажем еще три случая:

  • Вместо @ используйте $ для сумм
  • Поместите аддон справа от элемента
  • Показать аддоны с обеих сторон элемента

Ниже приведен код для создания трех вариантов группы ввода текста:

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount1">
<span class="input-group-addon">$</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount2">
<span class="input-group-addon">.00</span>
</div>

И результат будет выглядеть так:

Дополнительные примеры группы ввода текста

3. Использование кнопок с вводом

Мы использовали текстовое дополнение во всех приведенных выше примерах. Теперь давайте добавим кнопку в элемент .

<div class="input-group">
<input type="text" class="form-control" placeholder="Keyword">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>

Вам просто нужно добавить класс «.input-group-btn» к тегу , чтобы создать кнопку. Это даст следующий результат:

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

Как и в случае с текстовыми надстройками, вы можете разместить кнопку с любой стороны от или с обеих сторон.

4. Использование раскрывающегося списка с вводом

Следующий вариант — использовать кнопку раскрывающегося списка рядом с элементом ввода. Обратитесь к руководству по созданию раскрывающихся кнопок в раскрывающемся руководстве.

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-input-group-tutorial/#">Link 1</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-input-group-tutorial/#">Link 2</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-input-group-tutorial/#">Link 3</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Dropdown with Text Input" aria-label="Dropdown Input Group">
</div>

Выпадающая кнопка с элементом ввода будет выглядеть следующим образом:

Выпадающая группа ввода

5. Использование кнопки сегментированного раскрывающегося списка

Сегментированная кнопка раскрывающегося списка будет иметь стрелку раскрывающегося списка вниз по тексту кнопки. Это даст большую текстовую область для элемента ввода. Вы можете создать сегментированную группу ввода кнопок с помощью следующего кода:

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Segment</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-input-group-tutorial/#">Link 1</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-input-group-tutorial/#">Link 2</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-input-group-tutorial/#">Link 3</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Segmented Dropdown with Text Input" aria-label="Segmented Dropdown Input Group">
</div>

Это даст следующий результат:

Сегментированная группа ввода кнопок

6. Использование флажка с вводом

Ниже приведен код для создания элемента ввода с флажком впереди:

<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox Input Group">
</span>
<input type="text" class="form-control" placeholder="Checkbox with Text Input" aria-label="Checkbox Input Group">
</div>

Код выдаст следующий результат:

Группа ввода флажка

7. Использование радиокнопки с вводом

Последний вариант — показать радиокнопку перед полем ввода.

<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="Radio Button Input Group">
</span>
<input type="text" class="form-control" placeholder="Radio Button with Text Input" aria-label="Radio Button Input Group">
</div>

Радиокнопка с полем ввода должна выглядеть так:

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

8. Большая группа ввода

Вы можете увеличить размер всех элементов входной группы, добавив класс «.input-group-lg» к внешнему

.

<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

Изучите Bootstrap 5 (Индекс)


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.