Arranque 4 | Grupos de entrada

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *