Los grupos de entrada en Bootstrap se utilizan para ampliar los controles de formulario predeterminados al agregar texto o botones a ambos lados de las entradas de texto, selectores de archivos personalizados o entradas personalizadas.
Grupos de entrada básicos: las siguientes clases son las clases base que se utilizan para agregar los grupos a ambos lados de los cuadros de entrada.
- La clase .input-group-prepend se usa para agregar grupos al frente de la entrada.
- La clase .input-group-append se usa para agregarla detrás de la entrada.
- La clase .input-group-text se usa para diseñar el texto que se muestra dentro del grupo.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Input Groups in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <h3>Prepend Group Example</h3> <!-- Declare an input group --> <div class="input-group"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Define the text content of the group --> <span class="input-group-text" id="username"> @ </span> </div> <!-- Declare an input box --> <input type="text" class="form-control" placeholder="Username"> </div> <h3>Append Group Example</h3> <!-- Declare an input group --> <div class="input-group"> <!-- Declare an input group --> <input type="text" class="form-control" placeholder="Email"> <!-- Prepend the following content to the input box --> <div class="input-group-append"> <!-- Define the text content of the group --> <span class="input-group-text" id="email"> @example.com </span> </div> </div> <h3>Prepend and Append Together</h3> <!-- Declare an input group --> <div class="input-group"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Define the text content of the group --> <span class="input-group-text"> https:// </span> </div> <!-- Declare an input group --> <input type="text" class="form-control" placeholder="Your domain name here"> <!-- Append the following content to the input box --> <div class="input-group-append"> <!-- Define the text content of the group --> <span class="input-group-text">.com</span> </div> </div> </div> </body> </html>
Producción:
Dimensionamiento de los grupos de entrada: los grupos de entrada se pueden hacer más grandes o más pequeños mediante el uso de clases adicionales. Hay tres tamaños posibles de grupos de entrada.
- La clase .input-group-sm se usa para un tamaño más pequeño.
- La clase .input-group-lg se usa para un tamaño más grande.
- La clase .input-group se utiliza como tamaño predeterminado.
Nota: actualmente no se admite el tamaño de los elementos de grupos de entrada individuales.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Input Groups in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <h1>Sizing</h1> <!-- Declare the small input group --> <div class="input-group input-group-sm mb-3"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Define the text content of the group --> <span class="input-group-text" id="small"> Small </span> </div> <!-- Declare an input box --> <input type="text" class="form-control"> </div> <!-- Declare the normal input group --> <div class="input-group mb-3"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Define the text content of the group --> <span class="input-group-text" id="medium"> Default </span> </div> <!-- Declare an input box --> <input type="text" class="form-control"> </div> <!-- Declare the large input group --> <div class="input-group input-group-lg"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Define the text content of the group --> <span class="input-group-text" id="large"> Large </span> </div> <!-- Declare an input box --> <input type="text" class="form-control"> </div> </div> </body> </html>
Producción:
Uso de entradas múltiples: se pueden usar entradas múltiples con grupos de entrada.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Input Groups in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <h3>Multiple inputs</h3> <!-- Declare an input group --> <div class="input-group"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Define the text content of the group --> <span class="input-group-text" id=""> First & Last name </span> </div> <!-- Declare two input boxes --> <input type="text" class="form-control"> <input type="text" class="form-control"> </div> </div> </body> </html>
Producción:
Uso de complementos múltiples: los complementos múltiples se pueden apilar o mezclar con otros tipos, incluidas las casillas de verificación y los botones de opción.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Input Groups in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <h1>Multiple addons</h1> <!-- Declare an input group --> <div class="input-group mb-3"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Declare two input groups --> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> <!-- Declare an input box --> <input type="text" class="form-control"> </div> <!-- Declare an input group --> <div class="input-group"> <!-- Declare an input box --> <input type="text" class="form-control"> <!-- Append the following content to the input box --> <div class="input-group-append"> <!-- Declare two input texts --> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> </div> </div> </body> </html>
Producción:
Uso de complementos de botones: los botones también se pueden agregar o anteponer al cuadro de entrada.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Input Groups in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <h1>Button addons</h1> <!-- Declare an input group --> <div class="input-group mb-3"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Declare a button --> <button class="btn btn-outline-secondary" type="button"> Button </button> </div> <!-- Declare an input box --> <input type="text" class="form-control"> </div> <!-- Declare an input group --> <div class="input-group mb-3"> <!-- Declare an input box --> <input type="text" class="form-control"> <!-- Append the following content to the input box --> <div class="input-group-append"> <!-- Declare a button --> <button class="btn btn-outline-secondary" type="button"> Button </button> </div> </div> <!-- Declare an input group --> <div class="input-group mb-3"> <!-- Prepend the following content to the input box --> <div class="input-group-prepend"> <!-- Declare two buttons --> <button class="btn btn-outline-secondary" type="button"> Button 1 </button> <button class="btn btn-outline-secondary" type="button"> Button 2 </button> </div> <!-- Declare an input box --> <input type="text" class="form-control"> </div> <!-- Declare an input group --> <div class="input-group mb-3"> <!-- Declare an input box --> <input type="text" class="form-control"> <!-- Append the following content to the input box --> <div class="input-group-append"> <!-- Declare two buttons --> <button class="btn btn-outline-secondary" type="button"> Button 1 </button> <button class="btn btn-outline-secondary" type="button"> Button 2 </button> </div> </div> </div> </body> </html>
Producción:
Uso de selección personalizada: los grupos de entrada se pueden usar con elementos de selección personalizados.
Nota: Los navegadores no admiten las versiones predeterminadas de la selección personalizada.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Input Groups in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <h3>Custom select</h3> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="select01"> Options </label> </div> <select class="custom-select" id="select01"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="input-group mb-3"> <select class="custom-select" id="select02"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <label class="input-group-text" for="select02"> Options </label> </div> </div> </div> </body> </html>
Producción:
Uso de entrada de archivo personalizada:
Los grupos de entrada se pueden usar con entradas de archivos personalizados.
Nota:
Las versiones predeterminadas del navegador de entradas de archivos no son compatibles.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Input Groups in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <h3>Custom file input</h3> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"> Upload </span> </div> <div class="custom-file"> <input type="file" class="custom-file-input" id="file01"> <label class="custom-file-label" for="file01"> Choose file </label> </div> </div> <div class="input-group mb-3"> <div class="custom-file"> <input type="file" class="custom-file-input" id="file02"> <label class="custom-file-label" for="file02"> Choose file </label> </div> <div class="input-group-append"> <span class="input-group-text" id=""> Upload </span> </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vishal_Khoda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA