Grupos de entrada en Bootstrap con ejemplos

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.

El siguiente ejemplo demuestra estos grupos de entrada:

html

<!DOCTYPE html>
 
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <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:

Prepend and Append

Tamaño de los grupos de
entrada Los grupos de entrada pueden hacerse más grandes o más pequeños mediante clases adicionales. Hay 3 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 tiene el tamaño predeterminado.

Nota: actualmente no se admite el tamaño de los elementos del grupo de entrada individual.
Ejemplo:

html

<!DOCTYPE html>
 
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <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:

Sizing of input groups

Uso de entradas múltiples: se pueden usar entradas múltiples con grupos de entrada.
Ejemplo:

html

<!DOCTYPE html>
 
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <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:

Multiple Inputs

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>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <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:

Multiple Addons

Uso de complementos de botones: los botones también se pueden agregar o anteponer al cuadro de entrada.
Ejemplo:

html

<!DOCTYPE html>
 
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <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:

Multiple Buttons

Uso de selección personalizada : los grupos de entrada se pueden usar con selección personalizada.
Nota: Las versiones predeterminadas del navegador de selección personalizada no son compatibles.
Ejemplo:

html

<!DOCTYPE html>
<html>
 
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>Input Groups in Bootstrap</title>
</head>
 
<body>
    <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>
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Producción:

Custom Select

Uso de entrada de archivo personalizada : los grupos de entrada se pueden usar con entradas de archivo personalizadas.
Nota: Las versiones predeterminadas del navegador de entradas de archivos no son compatibles.
Ejemplo:

html

<!DOCTYPE html>
<html>
 
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>Input Groups in Bootstrap</title>
</head>
 
<body>
    <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>
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Producción:

Custom File

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

html

html

html

html

html

html

Deja una respuesta Cancelar la respuesta