Bootstrap es un marco CSS utilizado para diseñar páginas web. Bootstrap junto con HTML y JavaScript dan como resultado diseños web interactivos. La versión más reciente es Bootstrap v4.5. Bootstrap tiene una variedad de componentes y utilidades. Los componentes de Bootstrap incluyen el componente de formulario. Bootstrap tiene una clase de control de formulario incorporada que se usa para crear formularios y los campos de entrada de formulario correspondientes. El componente de formulario Bootstrap permite la creación de formularios utilizando filas anidadas. Las filas y columnas son otra utilidad más en Bootstrap que se puede usar para alinear las filas de formularios anidados.
En este artículo, veremos dos ejemplos para alinear las filas de formularios anidados, uno de los cuales hace uso de la clase de grupo de formularios, mientras que el otro ejemplo usa el concepto de filas y columnas solo para mostrar la estructura deseada.
Ejemplo 1: En este ejemplo, se define el contenedor principal que consiste en las filas de formulario anidadas. Dentro del contenedor, se define una clase de fila de grupo de formulario con una columna de 7 unidades de ancho. Esta columna nuevamente consta de una fila de grupo de formularios que comprende dos columnas. La primera columna se usa para especificar las etiquetas para el campo de entrada y la segunda columna se usa para definir los campos de entrada.
Dado que el ancho de la columna está definido, las etiquetas del formulario y el campo de entrada no exceden el tamaño de la columna y, por lo tanto, permanecen alineados. El botón se alinea con los campos de entrada del formulario colocándolo en la segunda columna de la fila anidada y manteniendo la primera columna vacía.
Implementación de código:
HTML
<!DOCTYPE html> <html> <head> <!-- Import bootstrap cdn --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity= "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- Import jquery cdn --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"> </script> </head> <body> <div class="container mt-2 ml-2"> <div class="form-group row"> <div class="col-sm-7"> <div class="form-group row"> <label for="description" class="col-sm-5 col-form-label"> Name </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="form-group row"> <label for="description" class="col-sm-5 col-form-label"> Institute </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="form-group row"> <label for="description" class="col-sm-5 col-form-label"> Degree </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="form-group row"> <label for="description" class="col-sm-5 col-form-label"> Year of Graduation </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="form-group row"> <label for="description" class="col-sm-5 col-form-label"> Diploma/Part Time/Full Time </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="row"> <div class="col-sm-5"></div> <div class="col-sm-7"> <button type="button" class="btn btn-success btn-md"> Proceed </button> </div> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, se define el contenedor principal que consta de las filas anidadas. Dentro del contenedor, se define una clase de fila que tiene una columna con un ancho de 7 unidades. Esta columna nuevamente consta de una fila que comprende dos columnas. La primera columna se usa para especificar las etiquetas para el campo de entrada y la segunda columna se usa para definir los campos de entrada. Dado que el ancho de la columna está definido, las etiquetas del formulario y el campo de entrada no exceden el tamaño de la columna y, por lo tanto, permanecen alineados. Por fin, un botón se coloca en la alineación adecuada con los campos de entrada del formulario. Es similar al primer enfoque excepto que no hacemos uso de la clase de grupo de formularios .
Implementación de código:
HTML
<!DOCTYPE html> <html> <head> <!-- Import bootstrap cdn --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity= "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- Import jquery cdn --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"> </script> </head> <body> <div class="container mt-2 ml-2"> <div class="row"> <div class="col-sm-7"> <div class="row mt-2"> <label for="description" class="col-sm-5"> Name </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="row mt-2"> <label for="description" class="col-sm-5"> Institute </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="row mt-2"> <label for="description" class="col-sm-5"> Degree </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="row mt-2"> <label for="description" class="col-sm-5"> Year of Graduation </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="row mt-2"> <label for="description" class="col-sm-5"> Diploma/Part Time/Full Time </label> <div class="col-sm-7"> <input type="text" class="form-control"> </div> </div> <div class="row mt-2"> <div class="col-sm-5"></div> <div class="col-sm-7"> <button type="button" class="btn btn-success btn-md"> Proceed </button> <button type="button" class="btn btn-danger btn-md"> Reset </button> </div> </div> </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA