TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear un grupo de entrada de Bootstrap 5?

5

En Bootstrap, el grupo de entrada se usa para agrupar texto, botones y grupo de botones en el elemento. Se utiliza principalmente con elementos de control de formulario para proporcionar información de texto adicional y agregar botones. En este tutorial, exploremos más sobre cómo usar el grupo de entrada en Bootstrap 5.

Tutorial de grupo de entrada de Bootstrap 5

Este tutorial contiene los siguientes temas:

  1. Grupo de entrada de texto
  2. Usar variaciones en el grupo de entrada de texto
  3. Grupo de entrada de botones
  4. Grupo de entrada desplegable
  5. Menú desplegable segmentado
  6. Usando casilla de verificación
  7. Insertar botón de radio
  8. Grupo de entrada más grande

1 grupo de entrada de texto

Primero, agrupemos elementos de texto simples con una etiqueta como la siguiente:

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

En el código anterior, se crea un cuadro de texto con la clase ".form-control". La clase adicional ".input-group-addon" se usa para agregar contenido de texto en el lado izquierdo y el código completo se envuelve dentro de un

con la clase ".input-group".

La salida se verá como a continuación en el navegador:

¿Cómo crear un grupo de entrada de Bootstrap 5?

2 variaciones en el grupo de entrada de texto

Hay muchas variaciones posibles del ejemplo básico anterior. Mostraremos tres casos más:

  • En lugar de usar @, use $ para las cantidades
  • Coloque el complemento en el lado derecho del elemento
  • Muestre los complementos a ambos lados del elemento

A continuación se muestra el código para crear tres variaciones en el grupo de entrada de texto:

<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>

Y el resultado se verá a continuación:

¿Cómo crear un grupo de entrada de Bootstrap 5?

3 Uso de botones con entrada

Hemos utilizado el complemento de texto en todos los ejemplos anteriores. Ahora agreguemos un botón al elemento.

<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>

Solo necesita agregar la clase ".input-group-btn" a la etiqueta para crear un botón. Producirá el siguiente resultado:

¿Cómo crear un grupo de entrada de Bootstrap 5?

De manera similar a las variaciones de los complementos de texto, puede colocar el botón en cualquier lado o en ambos lados.

4 Uso del menú desplegable con entrada

La siguiente opción es usar el botón desplegable al lado del elemento de entrada. Consulte el tutorial desplegable para crear botones desplegables.

<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>

El botón desplegable con el elemento de entrada se verá a continuación:

¿Cómo crear un grupo de entrada de Bootstrap 5?

5 Uso del botón desplegable segmentado

El botón desplegable segmentado tendrá una flecha desplegable en el texto del botón. Esto dará un área de texto más grande para el elemento de entrada. Puede crear el grupo de entrada de botones segmentado con el siguiente código:

<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>

Producirá el siguiente resultado:

¿Cómo crear un grupo de entrada de Bootstrap 5?

6 Uso de la casilla de verificación con entrada

A continuación se muestra el código para crear un elemento de entrada con una casilla de verificación al frente:

<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>

El código producirá el siguiente resultado:

¿Cómo crear un grupo de entrada de Bootstrap 5?

7 Uso del botón de radio con entrada

La última opción es mostrar el botón de opción delante del cuadro de entrada.

<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>

El botón de opción con el cuadro de entrada debería verse a continuación:

¿Cómo crear un grupo de entrada de Bootstrap 5?

8 Grupo de entrada más grande

Puede aumentar el tamaño de los elementos del grupo de entrada completo agregando la clase ".input-group-lg" al exterior

<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>

Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More