TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити групу введення Bootstrap 5?

3

У 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” використовується для додавання текстового вмісту з лівого боку, а повний код загортається всередину

з класом “.input-group”.

Вихідні дані виглядатимуть у браузері нижче:

Як створити групу введення Bootstrap 5?

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>

І результат буде виглядати так:

Як створити групу введення Bootstrap 5?

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”, щоб створити кнопку. Це дасть такий результат:

Як створити групу введення Bootstrap 5?

Подібно до варіантів надбудови тексту, ви можете розмістити кнопку будь -якою стороною або обома сторонами.

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="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Dropdown with Text Input" aria-label="Dropdown Input Group"> </div>

Випадаюча кнопка з елементом введення виглядатиме так:

Як створити групу введення Bootstrap 5?

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="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Segmented Dropdown with Text Input" aria-label="Segmented Dropdown Input Group"> </div>

Це дасть такий результат:

Як створити групу введення Bootstrap 5?

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>

Код дасть такий результат:

Як створити групу введення Bootstrap 5?

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>

Перемикач із полем введення має виглядати так:

Як створити групу введення Bootstrap 5?

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 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі